這篇文章給大家分享的是有關jQuery動態添加.active如何實現導航效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
代碼思路:
頁面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是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。
感謝各位的閱讀！關于“jQuery動態添加.active如何實現導航效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
