使用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> -tags設置樣式。 被單擊的一個將獲得.active類，而從另一個中刪除該類（如果已在其中設置）。 我已經嘗試過此代碼，但似乎並沒有達到目的：

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

Answer 1

Thijs是正確的，鏈接將您帶到另一個頁面。

添加return false; 到你的JS。 但是您將無法訪問該鏈接。

$(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上的頁面。