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