Bootstrap導(dǎo)航菜單點(diǎn)擊后無法自動(dòng)添加active的處理方法

更新時(shí)間：2018年08月10日 11:20:25 作者：有態(tài)度的Coder

今天小編就為大家分享一篇Bootstrap導(dǎo)航菜單點(diǎn)擊后無法自動(dòng)添加active的處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

Bootstrap提供了很豐富的前后端框架，為不精通CSS的程序猿們提供了很大的便利。前段時(shí)間在使用Bootstrap中的菜單控件時(shí)，其中的鏈接點(diǎn)擊后，無法自動(dòng)添加active類，即無法自動(dòng)激活。需要適當(dāng)做如下處理才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" })">我的請(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" })">我的入庫</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");
      }
    });
  })

原理很簡單，就是找到所有的li標(biāo)簽，對(duì)其a標(biāo)簽的鏈接地址進(jìn)行判斷，如何和當(dāng)前瀏覽器的地址一致，就認(rèn)為是當(dāng)前應(yīng)該激活的菜單，添加active類，否則就取消。

如此，即可~~

以上這篇Bootstrap導(dǎo)航菜單點(diǎn)擊后無法自動(dòng)添加active的處理方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

typescript 將數(shù)組清空的方法實(shí)現(xiàn)
在開發(fā)應(yīng)用程序時(shí),數(shù)組常用于存儲(chǔ)多個(gè)元素（如數(shù)字、字符串、對(duì)象等）,然而,在某些場景下,你可能需要將數(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的方法示例
本篇文章主要介紹了webpack 打包壓縮js和css的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法
這篇文章主要介紹了js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法,涉及javascript中split方法及數(shù)組的操作技巧,需要的朋友可以參考下
2015-05-05
使用javascript實(shí)現(xiàn)頁面加載loading動(dòng)畫(附完整源碼)
由于項(xiàng)目中多處要給ajax提交的時(shí)候增加等待動(dòng)畫效果,所以就寫了一個(gè)簡單的通用js方法,這篇文章主要給大家介紹了關(guān)于如何使用javascript實(shí)現(xiàn)頁面加載loading動(dòng)畫的相關(guān)資料,需要的朋友可以參考下
2024-06-06
微信小程序?qū)崿F(xiàn)2048小游戲的詳細(xì)過程
這篇文章主要給大家介紹了關(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á)式，具體有什么不同沒能說得很好。事實(shí)上，JavaScript的解析器對(duì)函數(shù)聲明與函數(shù)表達(dá)式并不是一視同仁地對(duì)待的。下面看看這兩者到底有什么不同。
2016-08-08
JS實(shí)現(xiàn)定時(shí)自動(dòng)消失的彈出窗口
這篇文章介紹了JS實(shí)現(xiàn)定時(shí)自動(dòng)消失的彈出窗口，文中通過示例代碼介紹的非常詳細(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)簽可以用來播放常見的音視頻格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，當(dāng)然支持的格式也和瀏覽器和操作系統(tǒng)有關(guān)，這篇文章主要介紹了video標(biāo)簽自動(dòng)播放音視頻并繪制波形圖,需要的朋友可以參考下
2023-09-09