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)文章
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)廣告條滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請求，返回DataSet(XML) 異步調(diào)用
Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請求，返回DataSet(XML) 異步調(diào)用實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-03-03
jquery 簡單的進(jìn)度條實(shí)現(xiàn)代碼
jquery其實(shí)是有個進(jìn)度條插件的，叫做jqueryprogressbar.js，可是想練習(xí)一下，就沒有用，自己寫了點(diǎn)代碼。這個代碼其實(shí)是參考別人的，因?yàn)樽约旱腏S基礎(chǔ)不是很好。2010-03-03
下面小編就為大家?guī)硪黄獙Quary選擇器的全面總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
幻燈片效果通常用于展示相冊圖片或特色推薦內(nèi)容。一個漂亮的幻燈片更能吸引訪客的注意力。本文里面，收集了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的朋友肯定會很熟悉，本文有個不錯的示例大家不妨可以鞏固一下2013-09-09
這里給大家介紹一款兼容各大瀏覽器的jQuery處理cookies的插件jQuery.cookie，有需要的小伙伴們可以參考下2014-11-11
jQuery實(shí)現(xiàn)帶漸顯效果的人物多級關(guān)系圖代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶漸顯效果的人物多級關(guān)系圖,可實(shí)現(xiàn)多種關(guān)系的顯示及點(diǎn)擊后漸顯切換效果,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)修改頁面元素顯示效果的相關(guān)技巧,需要的朋友可以參考下2015-10-10
最近發(fā)現(xiàn)一個不錯的基于jquery的插件thickBox ，感覺比facebox好用。但因?yàn)閖query官方不推薦使用。所以這個只是學(xué)習(xí)的朋友，不建議使用這個。2010-09-09