秋天，那永远是蓝湛湛的天空，会突然翻脸而露出险恶的颜色，热带台风夹着密云暴雨，洪水潜流着，复苏的草原又泛起点点苍苍的颜色。然而，台风暴雨一闪而过，强烈的气流依然抖动着耀眼的波光。这时，只有北来的候鸟知道这张温暖的床眠，那飞翔的天鹅、鸿雁和野鸭，就像一片阴深的云朵，使这儿显得更苍郁了。
代码思路:
页面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 rel="nofollow noopener noreferrer" href="index.html" rel="external nofollow" class="">页面1</a></li> <li id="zf"><a rel="nofollow noopener noreferrer" href="zf.html" rel="external nofollow" class="">页面2</a></li> <li id="gc"><a rel="nofollow noopener noreferrer" href="gc.html" rel="external nofollow" class="">页面3</a></li> <li id="hc"><a rel="nofollow noopener noreferrer" href="hc.html" rel="external nofollow" class="">页面4</a></li> <li id="shwt"><a rel="nofollow noopener noreferrer" href="shwt.html" rel="external nofollow" class="">页面5</a></li> </ul> </div> </body>
总结
以上所述是小编给大家介绍的jQuery动态添加.active 实现导航效果代码思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
本文jQuery动态添加.active 实现导航效果代码思路详解到此结束。贪婪是最真实的贫穷，满足是最真实的财富。小编再次感谢大家对我们的支持！