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

Answer 2

你可以使用那种css来设置悬停或聚焦效果。

.navbar-inverse 
 .navbar-nav>li>a:hover, 
  .navbar-inverse .navbar-nav>li>a:focus {
      background-color:#eee;
        color:red;
      }

但是，如果重新加载该页面，则必须检查其中的页面，然后您需要将<li></li>更改为<li class="active" ></li>

我认为会话或cookie可以检查你在JSP上的哪个页面。

使用JS突出显示菜单项

2 个答案: