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:
代碼思路:
通過(guò)jq獲取你打開(kāi)頁(yè)面的鏈接 window.location.pathname；
在HTML中給自己的li加入一個(gè)ID id的命名與網(wǎng)址鏈接中的href相同
通過(guò)jq包含方法找到相對(duì)應(yīng)的li給他加入active類(lèi)名
然后。。就沒(méi)有然后了。。。
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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
jQuery實(shí)現(xiàn)廣告條滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)廣告條滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請(qǐng)求，返回DataSet(XML) 異步調(diào)用
Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請(qǐng)求，返回DataSet(XML) 異步調(diào)用實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-03-03
jquery 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼
jquery其實(shí)是有個(gè)進(jìn)度條插件的，叫做jqueryprogressbar.js，可是想練習(xí)一下，就沒(méi)有用，自己寫(xiě)了點(diǎn)代碼。這個(gè)代碼其實(shí)是參考別人的，因?yàn)樽约旱腏S基礎(chǔ)不是很好。2010-03-03
下面小編就為大家?guī)?lái)一篇對(duì)jQuary選擇器的全面總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
幻燈片效果通常用于展示相冊(cè)圖片或特色推薦內(nèi)容。一個(gè)漂亮的幻燈片更能吸引訪客的注意力。本文里面，收集了15款jquery幻燈片插件，讓你的圖片展示更漂亮，讓你的特色內(nèi)容更吸引人。2011-04-04
點(diǎn)擊彈出層外區(qū)域關(guān)閉彈出層jquery特效示例
擊彈出層 ，點(diǎn)擊彈出層外區(qū)域關(guān)閉彈出層，點(diǎn)擊關(guān)閉關(guān)閉彈出層jquery特效，具體代碼如下，喜歡的朋友可以學(xué)習(xí)下2013-08-08
jquery中的foreach想必大家并不陌生吧，使用jquery的朋友肯定會(huì)很熟悉，本文有個(gè)不錯(cuò)的示例大家不妨可以鞏固一下2013-09-09
這里給大家介紹一款兼容各大瀏覽器的jQuery處理cookies的插件jQuery.cookie，有需要的小伙伴們可以參考下2014-11-11
jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖,可實(shí)現(xiàn)多種關(guān)系的顯示及點(diǎn)擊后漸顯切換效果,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素顯示效果的相關(guān)技巧,需要的朋友可以參考下2015-10-10
最近發(fā)現(xiàn)一個(gè)不錯(cuò)的基于jquery的插件thickBox ，感覺(jué)比f(wàn)acebox好用。但因?yàn)閖query官方不推薦使用。所以這個(gè)只是學(xué)習(xí)的朋友，不建議使用這個(gè)。2010-09-09