.active動態使用實現導航效果
- php中世界最好的语言原創
- 2018-04-19 15:49:421925瀏覽
這次帶給大家.active動態使用實現導航效果，.active動態使用實現導航效果的注意事項有哪些，下面就是實戰案例，一起來看一下。
透過jq取得你開啟頁面的連結 window.location.pathname;
# 在HTML中為自己的li加入一個ID id的命名與網址連結中的href相同
# 透過jq包含方法找到相對應的li給他加入active類別名稱
# 然後。 。就沒有然後了。 。 。
jq程式碼：
$(function() {
varli = $(".title_ul").children("li");
for(vari = 0; i < li.length; i++) {
varurl = window.location.pathname;
varurl = url.replace("/","");
if(url.indexOf(li[i].id)!=-1) {
li[i].firstChild.className ="active";
}else{
li[i].firstChild.className ="";
}
}
})html程式碼：
<body> <p 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> </p> </body>
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是.active動態使用實現導航效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn