使用 bootstrap 和 jQuery 切换 class

Question

如果有人可以提供帮助，我会就 jquery 和 bootstrap 的使用提出一些建议。

我有以下HTML

 <ul class="nav nav-pills nav-fill">
    <li class="nav-item">
        <a class="nav-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Our Services</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Our Venues</a>
    </li>
</ul>

然后我有以下jquery

 $('ul.nav li a').click(function (e) {
    $('ul.nav li.active').removeClass('active')
    $(this).parent('li').addClass('active')
 })

现在我想要创建的是单击导航-link 时的活动状态，它会移动到正在 selected 的任何选项卡，这可以做到但不能做到如果您 select 一个 link 打开并且 select 相同关闭，是否删除活动？

有人可以帮忙吗？

Answer 1

如果您想添加和删除具有相同 click 事件的 class（第一次单击添加 class，然后下一次删除 class），你可以使用 toggleClass 来实现它：

$('ul.nav li a').click(function (e) {

  // Select the parent li
  var el = $(this).parent();

  // Remove the class to the other li.active elements
  $('ul.nav li.active').not(el).removeClass('active');

  // Toggle the class to the current element: add the class if not present, removes the class if present
  el.toggleClass('active');

});

有关 toggleClass 的更多信息，请访问 jQuery 网站。

希望对您有所帮助！

Answer 2

核心问题是您首先删除 class，然后添加 class。如果你已经有 class 然后添加和删除它，当然它仍然会在那里。因此，为了删除 class 如果它已经存在，您必须编写如下条件语句：

    $(document).ready(function(){
   $('ul.nav li a').click(function (e) {
     if($(this).parent('li').hasClass('active')){
       $('ul.nav li.active').removeClass('active')
     }

     else {
       $('ul.nav li.active').removeClass('active')
       $(this).parent('li').addClass('active')
     }
 })
});

或者您可以使用 jQuery 的开关 class

Answer 3

感谢这两个回复，都达到了我想要的结果，我感谢你们提供的信息和详细的回复，这有助于我理解为什么我没有达到预期的结果。

使用 bootstrap 和 jQuery 切换 class

Toggle class with bootstrap and jQuery

jquery

jquery-ui-tabs

drop-down-menu

bootstrap-4