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 = place("/", "");
if (url.indexOf(li[i].id)!=-1) {
li[i].firstChild.className = "active";
} else {
li[i].firstChild.className = "";
}
}
})
html代码：
<body>
<div class="title">
html导航源码
<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 实现导航效果代码思路详解，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。