代碼思路:
頁面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動態添加.active 實現導航效果代碼思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
