5

我正在使用来自 Soh Tanaka 的一个不错的简单选项卡示例。http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery

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

如何为不同的选项卡组使用相同的类、相同的 jQuery？我知道 jQuery 中有可用的 .each() 方法，但我在尝试找出将其放入 jQuery 的正确位置时遇到了麻烦。任何帮助是极大的赞赏。

提前致谢。

4

3 回答 3

4

在您链接的博客条目的评论中，对此进行了讨论。他在这里链接到一个演示：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"

这是通过将您的选项卡式部分包装在一个带有类的 div 中来完成的simpleTabs

于 2010-12-16T22:00:23.383 回答
3

从您在文章中提到的 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/

于 2010-12-16T22:23:16.783 回答
0

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

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

于 2010-12-16T22:22:17.637 回答