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