Question

我有一个包含多个手风琴的页面，这些手风琴正在工作，但是js正在影响所有的手风琴而不仅仅是点击手风琴应该是。如何改变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');
})

})

这里有一个手风琴：

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

谢谢！

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');
})

功能定位仅点击元素

1 个答案: