如何从Bootstrap 3.1中的导航栏链接中删除活动类? | 1中的导航栏链接中删除活动类

本文介绍了如何从Bootstrap 3.1中的导航栏链接中删除活动类?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用一页导航，当我在页面的该特定部分时，我不知道如何从li元素中删除活动状态.我已经尝试过使用JQuery和CSS，但没有一个对我有用(从控制台上它显然起作用).

I am using one page navigation and I don't know how to remove the active state from the li element when I am in that particular section of the page. I have tried using JQuery and CSS and none works for me (from the console it works obviously).

这是在控制台中起作用的内容:

This is what works in the console:

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

在CSS中，我尝试过:

And in CSS I tried:

.nav > li {
   background: transparent;
}

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

I prefer a JQuery solution as it would be easier just to get rid of the active class instead of styling the element.

推荐答案

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

Looks like there are multiple listeners for document ready. And your code is getting executed before other handler/handlers which sets the class active again. You can use e.stopImmediatePropagation() to prevent that. Try this:

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

更新:

您也可以使用setInterval()来实现:

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

这篇关于如何从Bootstrap 3.1中的导航栏链接中删除活动类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！