javascript - 仅单击元素的选项卡更改，并非所有元素都具有相同的类

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 元素内。

$(".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