时间戳

首页 > 解决方案 > 使用引导程序和 jQuery 切换类

jquery - 使用引导程序和 jQuery 切换类

问题描述

如果有人可以提供帮助，我会在一些关于使用 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')
 })

现在我要创建的是当单击导航链接时的活动状态，并且它移动到正在选择的任何选项卡，这样做但是如果您选择要打开的链接并选择，它不会删除活动状态同样要关闭？

请问有人可以帮忙吗？

标签： jquerydrop-down-menubootstrap-4jquery-ui-tabs

解决方案

如果要添加和删除具有相同click事件的类（首先单击添加类，然后单击删除类），您可以使用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');

});

jQuery 网站上有关toggleClass的更多信息。

希望能帮助到你！

推荐阅读