欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery動(dòng)態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解

 更新時(shí)間：2017年08月29日 11:07:01   作者：Snper  
這篇文章主要介紹了jQuery動(dòng)態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解,需要的朋友可以參考下

 代碼思路:

頁(yè)面4:

頁(yè)面5:

代碼思路:

通過jq獲取你打開頁(yè)面的鏈接  window.location.pathname；

在HTML中給自己的li加入一個(gè)ID id的命名與網(wǎng)址鏈接中的href相同

通過jq包含方法找到相對(duì)應(yīng)的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="">頁(yè)面1</a></li>
 <li id="zf"><a href="zf.html" rel="external nofollow" class="">頁(yè)面2</a></li>
 <li id="gc"><a href="gc.html" rel="external nofollow" class="">頁(yè)面3</a></li>
 <li id="hc"><a href="hc.html" rel="external nofollow" class="">頁(yè)面4</a></li>
 <li id="shwt"><a href="shwt.html" rel="external nofollow" class="">頁(yè)面5</a></li>
 </ul>
</div>
</body>

總結(jié)

以上所述是小編給大家介紹的jQuery動(dòng)態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論