如何从 Bootstrap 3.1 中的导航栏链接中删除活动类？答案

【问题标题】：How to remove active class from navbar links in Bootstrap 3.1?如何从 Bootstrap 3.1 中的导航栏链接中删除活动类？
【发布时间】：2014-05-29 17:22:33
【问题描述】：

我正在使用单页导航，当我处于页面的特定部分时，我不知道如何从 li 元素中删除活动状态。我尝试过使用 JQuery 和 CSS，但没有一个对我有用（从控制台它显然可以工作）。

这是在控制台中起作用的：

$('.nav li').removeClass('active');

在 CSS 中我尝试过：

.nav > li {  
   background: transparent;
}

我更喜欢 JQuery 解决方案，因为摆脱活动类而不是设置元素样式会更容易。

【问题讨论】：

【解决方案1】：

看起来有多个侦听器准备好文档。并且您的代码在其他处理程序/处理程序之前执行，这再次将类设置为活动状态。您可以使用e.stopImmediatePropagation() 来防止这种情况。试试这个：

$(document).ready(function(e){
   e.stopImmediatePropagation();
   $('.nav li').removeClass('active');//or $('.active').removeClass('active');
});

更新：

您也可以使用setInterval()：

setInterval(function(){
  $('.active').removeClass('active');//remove class active
},1000);

【讨论】：

【解决方案2】：

在您的 html 中，当页面加载时，任何 li 上都没有活动类 - 除非您想要“home”或默认活动的东西，否则当然在相关 li 上有活动类。

然后当用户点击一个 li 试试这个：

$(".nav li").click(function() {
    $(".nav li").removeClass('active');
    $(this).addClass('active');    
});

上面会从它所在的任何 li 中删除活动类，然后将其添加到已单击的类中。

【讨论】：