Bootstrap導航菜單點擊后無法自動添加active的處理方法
更新時間：2018年08月10日 11:20:25 作者：有態(tài)度的Coder
今天小編就為大家分享一篇Bootstrap導航菜單點擊后無法自動添加active的處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
Bootstrap提供了很豐富的前后端框架，為不精通CSS的程序猿們提供了很大的便利。前段時間在使用Bootstrap中的菜單控件時，其中的鏈接點擊后，無法自動添加active類，即無法自動激活。需要適當做如下處理才OK。
廢話說了，直接上代碼：
<ul class="tabbable faq-tabbable">
<li class="active"><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyContract", new { area = "MyData" })">我的合同</a></li>
<li><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyCashout", new { area = "MyData" })">我的請款</a></li>
<li><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyReceive", new { area = "MyData" })">我的入庫</a></li>
<li><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyCashback", new { area = "MyData" })">我的付款</a></li>
</ul>
這是一個典型的導航菜單，現(xiàn)在添加如下的腳本處理：
$(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類，否則就取消。
如此，即可~~
以上這篇Bootstrap導航菜單點擊后無法自動添加active的處理方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
typescript 將數(shù)組清空的方法實現(xiàn)
在開發(fā)應用程序時,數(shù)組常用于存儲多個元素（如數(shù)字、字符串、對象等）,然而,在某些場景下,你可能需要將數(shù)組清空,本文主要介紹了typescript 將數(shù)組清空的方法實現(xiàn),感興趣的可以了解一下2024-08-08
本篇文章主要介紹了Three.js獲取鼠標點擊的三維坐標示例代碼。具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
本篇文章主要介紹了webpack 打包壓縮js和css的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法
這篇文章主要介紹了js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法,涉及javascript中split方法及數(shù)組的操作技巧,需要的朋友可以參考下2015-05-05
使用javascript實現(xiàn)頁面加載loading動畫(附完整源碼)
由于項目中多處要給ajax提交的時候增加等待動畫效果,所以就寫了一個簡單的通用js方法,這篇文章主要給大家介紹了關(guān)于如何使用javascript實現(xiàn)頁面加載loading動畫的相關(guān)資料,需要的朋友可以參考下2024-06-06
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)2048小游戲的相關(guān)資料,文中將實現(xiàn)的代碼介紹的非常詳細,對大家學習或者使用微信小程序具有一定的參考學習價值,需要的朋友可以參考下2021-09-09
JavaScript中函數(shù)聲明與函數(shù)表達式的區(qū)別詳解
可能很多朋友只知道兩種聲明方式一個是函數(shù)聲明一個是函數(shù)表達式，具體有什么不同沒能說得很好。事實上，JavaScript的解析器對函數(shù)聲明與函數(shù)表達式并不是一視同仁地對待的。下面看看這兩者到底有什么不同。2016-08-08
這篇文章介紹了JS實現(xiàn)定時自動消失的彈出窗口，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表
這篇文章主要為大家詳細介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
html中的<video>標簽可以用來播放常見的音視頻格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，當然支持的格式也和瀏覽器和操作系統(tǒng)有關(guān)，這篇文章主要介紹了video標簽自動播放音視頻并繪制波形圖,需要的朋友可以參考下2023-09-09