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

您需要链接标签列表和标签内容。为tabs-list添加了一个data-target属性，指向要与标签链接的标签内容（或者只使用next（）作为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>

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

3 个答案: