Bootstrap菜單將鏈接背景顏色設置為class =“ nav navbar-nav”

Question

如圖所示如何在引導菜單中更改鏈接的顏色。 鼠標懸停並單擊更改為菜單的默認顏色后即可使用。 我需要像圖片一樣。

HTML

 <div class="navbar-left">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Патници", "Index", "patnici")</li>
            <li >@Html.ActionLink("Помош", "Contact", "Home")</li>
        </ul>
    </div>

CSS

.navbar-nav > li > a {
      padding-top: 10px;
      padding-bottom: 10px;
      line-height: 20px;
    }

菜單-圖像

Answer 1

需要設置活動類。 在這里查看解決方案

Answer 2

下面的代碼可能會有所幫助，請在下面相應地更改顏色

    .navbar-nav li a {
        background:#C60;
        color:#FFFFFF;
        text-decoration:none;
        display: block;
    }

    .navbar-nav li a:visited  {
        background:yellow;
        color:#F00;
        text-decoration:none;
    }

Answer 3

這可能會有所幫助。 創建一個CSS類“ active”並設置背景色。

$(function() {
   $("li").click(function() {
      // remove existing class
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

Answer 4

$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});