更改导航顶部菜单栏中活动的类以进行引导答案

【问题标题】：change class active in the navigation top menu bar for bootstrap更改导航顶部菜单栏中活动的类以进行引导
【发布时间】：2016-08-24 17:44:12
【问题描述】：

单击引导程序顶部导航栏中的不同链接时，我在更改活动类时遇到问题。论坛中有很多与此问题相关的帖子，但我在那里尝试了大部分建议。对我有用的是，当我使用下面的 jquery 代码时，单击不同链接时活动类发生了变化，该代码是我从该论坛中的一篇帖子中复制的：

$(document).ready(function(){
  $('ul.nav > li').click(function(e){
    e.preventDefault();
    $('ul.nav > li').removeClass('active');
    $(this).addClass('active');
  });
});

这允许我在从一个链接单击到另一个链接时更改活动类。但是，现在不起作用的是它似乎无法从 a href 中读取内容。

如果我注释掉e.preventDefault(); 行，一切都会再次运行，因为它会根据a href="link_3" 中指定的链接加载内容，但活动类不再起作用。例如有link_1、link_2 和link_3。如果我单击 link_3，它会加载 link_3 的页面，但活动类会返回到 link_1。

我不确定还可以尝试什么。

任何帮助将不胜感激。

提前谢谢你

【问题讨论】：

通过href你的意思是当页面加载特定部分和类时没有移动到适当的li？

标签： jquery html twitter-bootstrap-3

【解决方案1】：

您的问题表明您刚刚开始使用 Web 技术。 <a href=""></a> 中的 href 定义了单击链接时要转到的页面。但是，当单击链接时，整个页面会重新加载，因此您的 Javascript/jQuery 更改不再有任何影响。

当您调用e.preventDefault(); 时，您会停止请求转到 href 中指定的新页面，然后您不会重新加载该页面并且您的 Javascript 可以正常工作。

你不能同时做这两个。我的建议是删除所有 JS/jQuery 代码，然后打开每个页面（link_1、link_2、link_3）HTML 并将活动类添加到每个页面中的正确元素。

【讨论】：

【解决方案2】：

无需使用 jQuery 只需使用 bootsrap active 类即可

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #BFDD19 !important;
    background-color: transparent;
    font-weight: 700;
}

【讨论】：