クリックした要素のみを対象とする機能

Question

複数のアコーディオンがあるページがありますが、jsはクリックされたアコーディオンだけでなく、すべてのアコーディオンに影響します。 JSを変更する必要があるのは、「クリックされた」アコーディオンだけが変更されることですか？

jQuery(document).ready(function(){ 

jQuery('ul.tabs li').click(function(){ 
    var tab_id = jQuery(this).attr('data-tab'); 

    jQuery('ul.tabs li').removeClass('current'); 
    jQuery('.tab-content').removeClass('current'); 

    jQuery(this).addClass('current'); 
    jQuery("#"+tab_id).addClass('current'); 
}) 

}) 

、ここaccordeonsの1：

<div class="mytabcontainer"> 
<ul class="tabs"> 
<li class="tab-link current" data-tab="A-1">BUTTON A</li> 
<li class="tab-link" data-tab="B-1">BUTTON B</li> 
<li class="tab-link" data-tab="C-1">BUTTON C</li> 
</ul> 
<div id="A-1" class="tab-content current"> 
content A 
</div> 
<div id="B-1" class="tab-content"> 
content B 
</div> 
<div id="C-1" class="tab-content"> 
content C 
</div> 
</div> 
<!-- container --> 

おかげでここ

はjsのです！

Answer 1

これは、ページ内のすべてのアコーディオンを選択したためです。

あなたはこのような何かをしたい：

jQuery('ul.tabs li').click(function(){ 
    var tab_id = jQuery(this).attr('data-tab'); 

    jQuery(this).closest('.mytabcontainer').find('ul.tabs li').removeClass('current'); 
    jQuery(this).closest('.mytabcontainer').find('.tab-content').removeClass('current'); 

    jQuery(this).addClass('current'); 
    jQuery("#"+tab_id).addClass('current'); 
})