bootstrap導航欄點擊後沒法添加active樣式

使用Bootstrap中的菜單控件時，其中的連接點擊後，沒法自動添加active類，即沒法自動激活

<ul class="tabbable faq-tabbable">

　　 <li class="active"><a href="@Url.Action("Index", "MyContract", new { area = "MyData" })">個人合同</a></li>

　　<li><a href="@Url.Action("Index", "MyCashout", new { area = "MyData" })">個人請款</a></li>

　　<li><a href="@Url.Action("Index", "MyReceive", new { area = "MyData" })">個人入庫</a></li>

　　 <li><a href="@Url.Action("Index", "MyCashback", new { area = "MyData" })">個人付款</a></li>

</ul>

 

這是一個典型的導航菜單，如今添加以下的腳本處理

$(function () {

　　$(".faq-tabbable").find("li").each(function () {

　　　　var a = $(this).find("a:first")[0];

　　　　 if ($(a).attr("href") === location.pathname) {

　　　　　　$(this).addClass("active");

　　　　} else {

　　　　　　 $(this).removeClass("active");

　　　　}

　　});

})

 

原理很簡單，就是找到全部的li標籤，對其a標籤的連接地址進行判斷，如何和當前瀏覽器的地址一致，就認爲是當前應該激活的菜單，添加active類，不然就取消

 

此解決辦法是網上查閱別人的