Question

我在点击引导程序顶部导航栏中的不同链接时遇到更改活动类的问题。论坛中有很多与此问题相关的帖子，但我在那里尝试了大部分建议。对我来说有用的是当我使用下面的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。

我不确定还有什么要尝试的。

非常感谢任何帮助。

提前谢谢

Answer 1

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

当您致电e.preventDefault();时，您停止转到href中指定的新页面的请求，然后您不会重新加载该页面并且您的Javascript正常运行。

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

Answer 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;
}

在导航顶部菜单栏中更改类激活以进行引导

2 个答案: