选项卡更改仅用于单击的元素，而不是所有元素都具有相同的类

tab change for only clicked element, not all with the same class

本文关键字：元素 用于 选项 单击      更新时间：2024-01-12

嗨，我有一个简单的选项卡脚本：

$(".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的情况下更改脚本以仅选择我单击的选项卡？非常感谢。

在您的点击处理程序中，您需要将操作范围限制为相关的.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

$(".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");
});
相关文章：