jQuery動態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解
更新時間：2017年08月29日 11:07:01 作者：Snper
這篇文章主要介紹了jQuery動態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解,需要的朋友可以參考下
代碼思路:
頁面4:
頁面5:
代碼思路:
通過jq獲取你打開頁面的鏈接 window.location.pathname；
在HTML中給自己的li加入一個ID id的命名與網(wǎng)址鏈接中的href相同
通過jq包含方法找到相對應(yīng)的li給他加入active類名
然后。。就沒有然后了。。。
jq代碼：
$(function () {
var li = $(".title_ul").children("li");
for (var i = 0; i < li.length; i++) {
var url = window.location.pathname;
var url = url.replace("/", "");
if (url.indexOf(li[i].id)!=-1) {
li[i].firstChild.className = "active";
} else {
li[i].firstChild.className = "";
}
}
})
html代碼：
<body> <div class="title"> <ul class="title_ul"> <li id="index"><a href="index.html" rel="external nofollow" class="">頁面1</a></li> <li id="zf"><a href="zf.html" rel="external nofollow" class="">頁面2</a></li> <li id="gc"><a href="gc.html" rel="external nofollow" class="">頁面3</a></li> <li id="hc"><a href="hc.html" rel="external nofollow" class="">頁面4</a></li> <li id="shwt"><a href="shwt.html" rel="external nofollow" class="">頁面5</a></li> </ul> </div> </body>
總結(jié)
以上所述是小編給大家介紹的jQuery動態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了jQuery橫向擦除焦點(diǎn)圖特效，一個具有自己特色的焦點(diǎn)圖會吸引用戶的注意力，讓用戶產(chǎn)生瀏覽網(wǎng)站的興趣至關(guān)重要，現(xiàn)在小編推薦給大家一款特別棒的焦點(diǎn)圖，感興趣的小伙伴可以參考下。2015-09-09
jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可關(guān)閉層的浮動層插件
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可關(guān)閉層的浮動層插件,具有點(diǎn)擊彈出帶有遮罩層的浮動層效果,且浮動層可拖動、可關(guān)閉,需要的朋友可以參考下2015-09-09
jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法
這篇文章主要介紹了jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法,可實(shí)現(xiàn)類似淘寶首頁縱向菜單的顯示效果,涉及jQuery鼠標(biāo)響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JQuery中extend怎么使用,需要的朋友可以參考下2014-03-03
jQuery Easyui datagrid連續(xù)發(fā)送兩次請求問題
用上述方式動態(tài)加載datagrid的數(shù)據(jù)時，通過net監(jiān)聽，發(fā)現(xiàn)調(diào)用了兩遍XX方法，目前的解決方案是，將url放到datagrid初始化的時候執(zhí)行2016-12-12
JQuery入門——事件切換之toggle()方法應(yīng)用介紹
在toggle()方法中，可以依次調(diào)用N個指定的函數(shù)，直到最后一個函數(shù)，然后重復(fù)對這個函數(shù)輪番調(diào)用,在函數(shù)之間切換調(diào)用的時候相當(dāng)?shù)姆奖?接下來將會詳細(xì)介紹toggle()方法的使用，感興趣的你可不要錯過了啊2013-02-02
ztree獲取選中節(jié)點(diǎn)時不能進(jìn)入可視區(qū)域出現(xiàn)BUG如何解決
zTree 是一個依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。本文給大家介紹ztree獲取選中節(jié)點(diǎn)時不能進(jìn)入可視區(qū)域出現(xiàn)BUG如何解決的相關(guān)資料，對ztree獲取選中節(jié)點(diǎn)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
在很多時候，我們都不是一步就將所有信息填寫完整，然后提交。而是分步進(jìn)行填寫表單2011-03-03
12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
圖片輪播是網(wǎng)站中的常用功能，用于在有限的網(wǎng)頁空間內(nèi)展示一組產(chǎn)品圖片或者照片，同時還有非常吸引人的動畫效果,本文向大家推薦12款實(shí)用的 jQuery 圖片輪播效果插件感興趣的朋友可以了解下哦2013-01-01
jquery插件方式實(shí)現(xiàn)table查詢功能的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query插件方式實(shí)現(xiàn)table查詢功能的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06