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

现在我想要创建的是一个活动状态，当点击导航链接并将其移动到正在选择的任何选项卡时，这样做但它没有做的是删除活动状态如果您选择一个链接打开并选择相同的关闭？

有人可以帮忙吗？

Answer 1

如果要添加和删除具有相同click事件的类（首次单击时添加类，然后删除该类），可以使用toggleClass来实现它：< / p>

$('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的更多信息。

希望它有所帮助！

Answer 2

核心问题是您首先删除该类，然后添加该类。如果您已经拥有该类，然后添加和删除它，当然它仍然会存在。所以为了让你删除它已经存在的类，你必须写一个这样的条件语句：

    $(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的切换类

Answer 3

感谢两位回复，我们都取得了以后的成果，感谢您提供的信息和详细的回复，这有助于我理解为什么我没有达到预期的效果。< / p>

使用bootstrap和jQuery切换类

3 个答案: