Question

我正在使用Soh Tanaka的一个很好的简单标签示例。http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery

我正在尝试将多个标签组放在同一页面上，但每个标签组使用相同的类。我动态地为选项卡制作内容，因此为每个选项卡组创建新类是不可能的。

如何为不同的选项卡组使用相同的类，相同的jQuery？我知道jQuery中有.each（）方法，但我无法找到将它放在jQuery中的正确位置。任何帮助是极大的赞赏。

提前致谢。

Answer 1

在您关联的博客条目的评论中，有一个关于此的讨论。他链接到这里的演示：http://www.sohtanaka.com/web-design/examples/tabs/index3.htm

在该演示中，标签的访问方式发生了变化。

$("div[class^='simpleTabs']").simpleTabs(); //Run function on any div with class name of "Simple Tabs"

这是通过将标签部分包含在类simpleTabs

的div中来完成的

Answer 2

在您的文章中引用Soh Tanaka的示例页面中的代码：

$(document).ready(function() {

 //When page loads...
 $(".tab_content").hide(); //Hide all content
 $("ul.tabs li:first").addClass("active").show(); //Activate first tab
 $(".tab_content:first").show(); //Show first tab content

 //On Click Event
 $("ul.tabs li").click(function() {

  $("ul.tabs li").removeClass("active"); //Remove any "active" class
  $(this).addClass("active"); //Add "active" class to selected tab
  $(".tab_content").hide(); //Hide all tab content

  var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
  $(activeTab).fadeIn(); //Fade in the active ID content
  return false;
 });

});

关键是将代码修复为仅引用当前选项卡组以便在选项卡之间切换。这是通过确保不需要全局上下文的地方，只有本地组，我们更改选择器来实现的。当从一组选项卡引用它们的内容时，问题是如何将一个选项卡与另一个选项卡匹配，这可以通过一些常见的ID系统完成，或者如果假设选项卡位于其内容之前，没有重叠，那么我们可以只需从标签集中找到下一个tab_container即可。

首先，初始化：

$(".tab_content").hide();

很好，我们想要隐藏所有这些。

$("ul.tabs li:first").addClass("active");
$(".tab_content:first").show();

不好，这将引用页面上的所有选项卡组，需要具体。

$("ul.tabs").each(function() {
    $(this).find('li:first').addClass("active");
    $(this).nextAll('.tab_container:first').find('.tab_content:first').show();
});

.click()事件开始正常，绑定所有ul.tabs li都没问题。内部需要更改选择器。

$("ul.tabs li").click(function() {
    var cTab = $(this).closest('li');
    cTab.siblings('li').removeClass("active");
    cTab.addClass("active");
    cTab.closest('ul.tabs').nextAll('.tab_container:first').find('.tab_content').hide();

    var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content

    return false;
});

activeTab的最后一部分已经很好了，请注意不要重复使用ID。

参见演示： http://jsfiddle.net/uyvUZ/1/

视觉上更容易，但不同的演示： http://jsfiddle.net/uyvUZ/2/

Answer 3

我使用了您提供的示例并添加了第二个标签组。你可以在这里看到它：http://jsfiddle.net/eSHdb/1/

除此之外，我认为我们需要更多关于您尝试使用的示例代码和特定问题的详细信息。请注意，我的示例并不是真的很漂亮但可以设置样式。

jQuery，一个页面上有多个选项卡组

3 个答案: