多个选项卡列表：如何仅显示单击的选项卡列表的内容？

Question

I have several tabs that uses the event on('click') . That problem is whenever I click a tab that triggers the event it also affects other tabs. How can I prevent it from firing or affecting other tabs.

Here is a sample of the tabs that I'm building on -

 $(document).ready(function() { $('.tabs-list li:first').addClass('active'), $('.tab-content .show-content:first').addClass('active'); $('.tabs-list li').click(function(e) { event.preventDefault(); if(!$(this).hasClass('active')) { var tabIndex = $(this).index(); var nthChild = tabIndex + 1; $('.tabs-list li.active').removeClass('active'); $(this).addClass('active'); $('.tab-content .show-content').removeClass('active'); $('.tab-content .show-content:nth-child('+ nthChild +')').addClass('active'); } }) }) 

 .tabs-list li { display: inline-block; } .tab-content .show-content { display: none } .tab-content .show-content.active { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="tabs-list"> <li>Tab 1</li> <li>Tab 2</li> </ul> <div class="tab-content"> <div class="show-content"> Content 1 </div> <div class="show-content"> Content 2 </div> </div> <ul class="tabs-list"> <li>Tab 1</li> <li>Tab 2</li> </ul> <div class="tab-content"> <div class="show-content"> Content 1 </div> <div class="show-content"> Content 2 </div> </div> 

Answer 1

You can try accessing the event's target node and it's information to make sure you should execute.

ie

function modalBackgroundClick(e) {
    if (e.target.id == "modalContainer") {
        modalContainer.style.display = "none";
    }
}

This is checking that you actually clicked a modal background but it should be similar functionality

Answer 2

You have several .tabs-list and .tab-content in your page so when you use the selectors $('.tabs-list ...') and $('.tab-content ...') , you are not only selecting the clicked .tabs-list and its corresponding .tab-content but all the .tabs-list and .tab-content .

You need to stick with $(this) (representing the clicked .tabs-list ) and select all the other elements from $(this) . jQuery provides several helpers to achieve it, like .parent() , .find() and .next() .

Here is a fixed version of your code, using those helpers:

 $(document).ready(function() { $('.tabs-list li:first').addClass('active'), $('.tab-content .show-content:first').addClass('active'); $('.tabs-list li').click(function(e) { event.preventDefault(); if(!$(this).hasClass('active')) { var tabIndex = $(this).index(); var nthChild = tabIndex + 1; // select the right elements var $tabsList = $(this).parent(); var $tabContent = $tabsList.next('.tab-content'); $tabsList.find('li.active').removeClass('active'); $(this).addClass('active'); $tabContent.find('.show-content').removeClass('active'); $tabContent.find('.show-content:nth-child('+ nthChild +')').addClass('active'); } }) }) 

 .tabs-list li { display: inline-block; } .tab-content .show-content { display: none } .tab-content .show-content.active { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="tabs-list"> <li>Tab 1</li> <li>Tab 2</li> </ul> <div class="tab-content"> <div class="show-content"> Content 1 </div> <div class="show-content"> Content 2 </div> </div> <ul class="tabs-list"> <li>Tab 1</li> <li>Tab 2</li> </ul> <div class="tab-content"> <div class="show-content"> Content 1 </div> <div class="show-content"> Content 2 </div> </div> 

Answer 3

You need to link your tabs list and tab content. Added a data-target attribute for the tabs-list that points to the tabs-content that you want to link the tabs with (or just use next() as GG suggested below) See adjusted JS accordingly

 $(document).ready(function() { $('.tabs-list li:first').addClass('active'), $('.tab-content .show-content:first').addClass('active'); $('.tabs-list li').click(function(e) { event.preventDefault(); var tabParent =($(e.currentTarget.parentElement)); var targetId = tabParent.data('target'); var tabContent = $(targetId); if(!$(this).hasClass('active')) { var tabIndex = $(this).index(); var nthChild = tabIndex + 1; tabParent.find('li.active').removeClass('active'); $(this).addClass('active'); tabContent.find('.show-content').removeClass('active'); tabContent.find('.show-content:nth-child('+ nthChild +')').addClass('active'); } }) }) 

 .tabs-list li { display: inline-block; } .tab-content .show-content { display: none } .tab-content .show-content.active { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="tabs-list" data-target="#contentContainer1"> <li>Tab 1</li> <li>Tab 2</li> </ul> <div class="tab-content" id="contentContainer1"> <div class="show-content"> Content 1 </div> <div class="show-content"> Content 2 </div> </div> <ul class="tabs-list" data-target="#contentContainer2"> <li>Tab 1</li> <li>Tab 2</li> </ul> <div class="tab-content" id="contentContainer2"> <div class="show-content"> Content 1 </div> <div class="show-content"> Content 2 </div> </div> 

.