javascript - 使用JS高亮菜单项

Question

我知道这是一个常见问题，但由于我使用的是 Bootstrap，我认为其他人也可能会感兴趣。我的所有页面都包含一个标准的 Bootstrap 导航栏。

   <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <a style="color:#fff;" class="navbar-brand brand-hover" href="welcome.jsp"><span style="color:red;" class="glyphicon glyphicon-headphones"></span> <span style="color:green;" class="glyphicon glyphicon-music"></span> Martin Music Store</a>
      <ul class="nav navbar-nav">
        <li><a href="albumResults.jsp">Album results</a></li>
        <li><a href="songResults.jsp">Song results</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li style = "margin-right: 50px;"><a href="cart.jsp">To shopping cart <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
</nav>

现在我想为 <li> 设置样式- 当用户点击它们时的标签。被点击的那个获得类 .active而如果它被设置在那里，它会从另一个中移除。我已经尝试过这段代码，但它似乎并不能解决问题:

<script>
    $(document).ready(function() {
    $(".navbar li").on("click", function() {
        $(".navbar li").removeClass("active");
        $(this).addClass("active");
    });
});
</script>

Answer 1

Thijs 是对的，链接会将您带到另一个页面。

在您的 JS 中添加一个 return false;。但是您将无法访问该链接。

$(document).ready(function() {
    $(".navbar li").on("click", function() {
        $(".navbar li").removeClass("active");
        $(this).addClass("active");
        return false;
    });
});