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

Question

I have a tab navigation that sits above and below a block of content. I want the active tab to be highlighted by using the class active-tab . By default, the first tab is the active tab. When clicking on one of the other tabs, I want that tab to be highlighted as the active tab.

My HTML structure looks like this

<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>

The jQuery code looks like this:

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

The jQuery code above works but it only adds and removes the active-tab class for the tab navigation that was used. If I use the navigation above the content, it will only change the class for the tabs above the content but not for the ones below. However, I want it to update the class on both.

Answer 1

As you are getting rel value you can use this as a selector to add active class to required divs ie: $(".tab-navigation li[rel="+activeTab+"]") .

Demo Code :

 $(".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"); //add class where rel matches $(".tab-navigation li[rel=" + activeTab + "]").addClass("active-tab"); });

 .active-tab { color: red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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 Content1</div> <div id="tab2" class="tab_content">Some Content2</div> <div id="tab3" class="tab_content">Some Content3</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>