使用 jQuery 从多个元素添加和删除类

Question

我有一个选项卡导航位于内容块的上方和下方。我希望使用 class 突出显示活动选项卡active-tab。默认情况下，第一个选项卡是活动选项卡。单击其他选项卡之一时，我希望该选项卡突出显示为活动选项卡。

我的 HTML 结构如下所示

<ul class="tab-navigation">

    <li class="tab active-tab" rel="tab1">First tab</li>

    <li class="tab" rel="tab2">Second tab</li>

    <li class="tab" rel="tab3">Third tab</li>

</ul>

<div>

    <div class="tab_container">

        <div id="tab1" class="tab_content">Some Content</div>

        <div id="tab2" class="tab_content">Some Content</div>

        <div id="tab3" class="tab_content">Some Content</div>

    </div>

</div>

<ul class="tab-navigation">

    <li class="tab active-tab" rel="tab1">First tab</li>

    <li class="tab" rel="tab2">Second tab</li>

    <li class="tab" rel="tab3">Third tab</li>

</ul>

jQuery 代码如下所示：

$(".tab_content").hide();

$(".tab_content:first").show();

$("ul.tab-navigation li").click(function() {

    

    $(".tab_content").hide();

    var activeTab = $(this).attr("rel"); 

    $("#"+activeTab).fadeIn();      

    

    $("ul.tab-navigation li").removeClass("active-tab");

    $(this).addClass("active-tab");

    

});

上面的 jQuery 代码可以工作，但它只添加和删除active-tab所使用的选项卡导航的类。如果我使用内容上方的导航，它只会更改内容上方选项卡的类，而不会更改下方选项卡的类。但是，我希望它能够更新两者的课程。

Answer 1

当您获得rel价值时，您可以使用它作为选择器将活动类添加到所需的 div 中，即：$(".tab-navigation li[rel="+activeTab+"]")。演示代码：$(".tab_content").hide();$(".tab_content:first").show();$("ul.tab-navigation li").click(function() {&nbsp; $(".tab_content").hide();&nbsp; var activeTab = $(this).attr("rel");&nbsp; $("#" + activeTab).fadeIn();&nbsp; $("ul.tab-navigation li").removeClass("active-tab");&nbsp; //add class where rel matches&nbsp; $(".tab-navigation li[rel=" + activeTab + "]").addClass("active-tab");});.active-tab {&nbsp; color: red}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="tab-navigation">&nbsp; <li class="tab active-tab" rel="tab1">First tab</li>&nbsp; <li class="tab" rel="tab2">Second tab</li>&nbsp; <li class="tab" rel="tab3">Third tab</li></ul><div>&nbsp; <div class="tab_container">&nbsp; &nbsp; <div id="tab1" class="tab_content">Some Content1</div>&nbsp; &nbsp; <div id="tab2" class="tab_content">Some Content2</div>&nbsp; &nbsp; <div id="tab3" class="tab_content">Some Content3</div>&nbsp; </div></div><ul class="tab-navigation">&nbsp; <li class="tab active-tab" rel="tab1">First tab</li>&nbsp; <li class="tab" rel="tab2">Second tab</li>&nbsp; <li class="tab" rel="tab3">Third tab</li></ul>