這次帶給大家.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中文網其他相關文章!