多個選項卡列表：如何只顯示被點擊的選項卡列表的內容？

Question

我有幾個使用事件on('click')的選項卡。這個問題是每當我點擊觸發事件的選項卡時，它也會影響其他選項卡。我怎樣才能防止它發射或影響其他標籤。

這裏是我建立的標籤的樣本 -

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

您可以嘗試訪問該事件的目標節點，它的信息，以確保你應該執行。

即

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

這是檢查你實際點擊一個模式的背景，但它應該是類似的功能

Answer 2

你有幾個.tabs-list和.tab-content在你的頁面，所以當你使用選擇$('.tabs-list ...')和$('.tab-content ...') ，您不僅可以選擇點擊的.tabs-list及其對應的.tab-content，還可以選擇所有的.tabs-list和.tab-content。

您需要使用$(this)（代表點擊的.tabs-list）並選擇$(this)中的所有其他元素。 jQuery提供了幾個助手來實現它，如.parent(),.find()和.next()。

這裏是你的代碼的固定版本，使用這些助手：

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

您需要將自己的標籤列表和標籤內容。 增加了對標籤列表指向要與標籤鏈接標籤，內容的數據目標屬性（或只使用下一個（）的GG以下建議） 見調整JS相應

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

。