onglets jQuery - plusieurs jeux sur la page

Question

C'est une sorte de suivi à partir d'une question précédente, je mais j'ai posté pas été en mesure de faire fonctionner ..

J'essaie d'utiliser plusieurs jeux des onglets (jQuery) sur une page.

Voici le code que j'avais pour un ensemble d'onglets qui fonctionne très bien:

$('div.tabs div.tab').hide(); 
$('div.tabs div:first').show(); 
$('div.tabs ul.htabs li:first a').addClass('current'); 
$('div.tabs ul.htabs li a').click(function(){ 
    $('div.tabs ul.htabs li a').removeClass('current'); 
    $(this).addClass('current'); 
    var currentTab = $(this).attr('href'); 
    $('div.tabs div.tab').hide(); 
    $(currentTab).show(); 
    return false; 
}); 

Pour utiliser plus d'un ensemble sur la page que j'attribue # id à chaque onglet-set et a essayé de impliment cela avec :

$.each(['#tabs-1', '#tabs-2', '#tabs-3' ], function(id) { 
    $(id + 'div.tab').hide(); 
    $(id + 'div:first').show(); 
    $(id + 'ul.htabs li:first a').addClass('current'); 
    $(id + 'ul.htabs li a').click(function(){ 
     $(id + 'ul.htabs li a').removeClass('current'); 
     $(this).addClass('current'); 
     var currentTab = $(this).attr('href'); 
     $(id + 'div.tab').hide(); 
     $(currentTab).show(); 
     return false; 
    }); 
}); 

De toute évidence, je fais quelque chose de mal ici, mais comme un nouveau venu jQuery je suis perplexe!

Answer 1

d'accord, donc cela ne fonctionnait pas même avec l'espacement correct dans le code, mais je l'ai trouvé une solution de poids léger beaucoup plus qui fonctionne parfaitement - jQuery MINITABS:

/* 
* jQuery MiniTabs 0.1 - http://code.google.com/p/minitabs/ 
*/ 
jQuery.fn.minitabs = function(speed,effect) { 
    var id = "#" + this.attr('id') 
    $(id + ">div:gt(0)").hide(); 
    $(id + ">ul>li>a:first").addClass("current"); 
    $(id + ">ul>li>a").click(
    function(){ 
     $(id + ">ul>li>a").removeClass("current"); 
     $(this).addClass("current"); 
     $(this).blur(); 
     var re = /([_\-\w]+$)/i; 
     var target = $('#' + re.exec(this.href)[1]); 
     var old = $(id + ">div"); 
     switch (effect) { 
     case 'fade': 
      old.fadeOut(speed).fadeOut(speed); 
      target.fadeIn(speed); 
      break; 
     case 'slide': 
      old.slideUp(speed); 
      target.fadeOut(speed).fadeIn(speed); 
      break; 
     default : 
      old.hide(speed); 
      target.show(speed) 
     } 
     return false; 
    } 
); 
} 

En utilisant ce code, vous pouvez alors ajouter:

$('#tabs-1').minitabs(); 
$('#tabs-2').minitabs(); 
$('#tabs-3').minitabs(); 

Et tout fonctionne parfaitement!

Answer 2

$(id + 'div.tab').hide(); 

Est-ce qu'il ne manque pas d'espace entre l'ID et le 'div.tab'? Cela permettrait d'évaluer "#tabs-1div.tab".