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