jQuery选项卡 – 页面上有多个集合

这是我发布的上一个问题的后续内容，但我无法让它工作..

我试图在一个页面上使用多组选项卡（jQuery）。

这是我用于一组选项卡的代码，它非常有用：

$('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; }); 

要在页面上使用多个集合，我为每个标签集分配了#id，并尝试使用以下方法来实现：

 $.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; }); }); 

显然我在这里做错了但作为一个jQuery新手我很难过！

Answer 1

好吧，所以即使代码中的正确间距也没有用，但是我发现了一个更加轻巧的解决方案，它可以很好地工作 – 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; } ); } 

使用此代码，您可以添加：

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

一切都很完美！

Answer 2

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

id和’div.tab’之间是否缺少空格？ 这将评估为"#tabs-1div.tab" 。