jQuery，一个页面上有多个选项卡组
我正在使用Soh Tanaka的一个很好的简单选项卡示例。 http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery
我试图在同一页面上放置多个选项卡组，但为每个选项卡组使用相同的类。 我正在动态制作选项卡的内容，因此为每个选项卡组创建新类是不可能的。
如何为不同的选项卡组使用相同的类，相同的jQuery？ 我知道jQuery中有.each（）方法，但我无法找到将它放在jQuery中的正确位置。 任何帮助是极大的赞赏。
提前致谢。
在您链接的博客条目的评论中，有关于此的讨论。 他在这里链接到一个演示： 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中来simpleTabs
在您的文章中引用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/
我使用了您提供的示例并添加了第二个选项卡组。 你可以在这里看到它： http ： //jsfiddle.net/eSHdb/1/
除此之外，我认为我们需要更多关于您尝试使用的示例代码和特定问题的详细信息。 注意我的例子并不是真的很漂亮，但可以设计风格。