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。
廢話(huà)說(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)文章
原生javascript實(shí)現(xiàn)類(lèi)似vue的數(shù)據(jù)綁定功能示例【觀察者模式】
這篇文章主要介紹了原生javascript實(shí)現(xiàn)類(lèi)似vue的數(shù)據(jù)綁定功能,結(jié)合實(shí)例形式分析了JavaScript基于觀察者模式實(shí)現(xiàn)類(lèi)似vue的數(shù)據(jù)綁定相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
bootstrap-table.js擴(kuò)展分頁(yè)工具欄(增加跳轉(zhuǎn)到xx頁(yè))功能
這篇文章主要介紹了bootstrap-table.js擴(kuò)展分頁(yè)工具欄，增加跳轉(zhuǎn)到xx頁(yè)功能，由于小編的水平停留在dom級(jí)，此次擴(kuò)展只支持頁(yè)面上的表格，如果大家有好的建議歡迎提出2017-12-12
根據(jù)輸入郵箱號(hào)跳轉(zhuǎn)到相應(yīng)登錄地址的解決方法
本文分享了基于javascript實(shí)現(xiàn)的根據(jù)輸入郵箱號(hào)跳轉(zhuǎn)到相應(yīng)登錄地址的具體實(shí)例代碼，需要的朋友一起來(lái)看下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了JS版的圖片放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript使用localStorage存儲(chǔ)數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了JavaScript使用localStorage存儲(chǔ)數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
JavaScript基礎(chǔ)入門(mén)之錯(cuò)誤捕獲機(jī)制
使用insertAfter()方法在現(xiàn)有元素后添加一個(gè)新元素
JavaScript中forEach和map詳細(xì)講解