Question

您好我有一个简单的标签脚本：

$(".tabs").each(function() {
        $(this).each(function() {
            // FIRST IS ACTIVE
            $(".tabs-nav").find("li").eq(0).addClass("tab-active");
            $(".tabs-content").find("> div, > span, > p").eq(0).nextAll().hide();

            // CHANGE ACTIVE TAB
            $(".tabs-nav li").click(function(event) {

                $(".tabs-nav li").removeClass("tab-active");
                $(".tabs-content").children().fadeOut();
                $(this).addClass("tab-active");
                getCurrentTab = $(this).index();    
                $(".tabs-content > div, .tabs-content > span, .tabs-content > p").eq(getCurrentTab).fadeIn();

            });

        });
    });

和HTML：

 <div class="tabs">
        <ul class="tabs-nav">
        <li><a>Tab 1</a></li>
        <li><a>Tab 2</a></li>
        <li><a>Tab 3</a></li>
     </ul>

     <div class="tabs-content">
        <div>Tab 1 Content</div>
        <div>Tab 2 Content</div>
        <div>Tab 3 Content</div>
     </div>
 </div>

 <div class="tabs">
        <ul class="tabs-nav">
        <li><a>Tab 1</a></li>
        <li><a>Tab 2</a></li>
        <li><a>Tab 3</a></li>
     </ul>

     <div class="tabs-content">
        <div>Tab 1 Content</div>
        <div>Tab 2 Content</div>
        <div>Tab 3 Content</div>
     </div>
</div>

当我在第一个标签div中选择一个标签时，该事件将在两个标签div处。如何更改脚本以仅选择我单击的选项卡而不添加ID？非常感谢。

Answer 1

$(".tabs").each(function() {
        $(this).each(function() {
            // FIRST IS ACTIVE
            $(".tabs-nav").find("li").eq(0).addClass("tab-active");
            $(".tabs-content").find("> div, > span, > p").eq(0).nextAll().hide();
        });
});
 // CHANGE ACTIVE TAB
$(".tabs-nav li").click(function(event) {
        $(".tabs-nav li").removeClass("tab-active");
        $(".tabs-content").children().fadeOut();
        $(this).addClass("tab-active");
        getCurrentTab = $(this).index();    
        $(".tabs-content > div, .tabs-content > span, .tabs-content > p").eq(getCurrentTab).fadeIn();
        $(this).addClass("tab-active");
});

Answer 2

在您的点击处理程序中，您需要将操作范围限制为相关的.tabs元素。

$(".tabs .tabs-nav li").click(function (event) {
    var $this = $(this).addClass("tab-active"),
        $tab = $this.closest('.tabs'),
        $contents = $tab.find(".tabs-content > *");
    $this.siblings().removeClass("tab-active");

    var index = $this.index();
    var $content = $contents.eq(index).stop(true, true).fadeIn();
    $contents.not($content).stop(true, true).fadeOut();

}).filter(':first-child').click();

演示：Fiddle

选项卡仅针对单击的元素进行更改，而不是全部使用相同的类

2 个答案: