实例分享jQuery动态添加.active 实现导航效果代码
程序员文章站
2022-04-22 13:06:11
...
本文主要介绍了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 = 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>
相关推荐：
以上就是实例分享jQuery动态添加.active 实现导航效果代码的详细内容，更多请关注其它相关文章！
下一篇： 网贷相关
推荐阅读
-
jQuery实现动态添加和删除input框代码实例
-
vue+ElementUI实现订单页动态添加产品数据效果实例代码
-
jQuery动态添加.active 实现导航效果代码思路详解
-
jQuery实现导航条背景切换效果的代码分享
-
jQuery实现文字打印动态效果实例分享
-
vue+ElementUI实现订单页动态添加产品数据效果实例代码
-
jQuery动态添加.active 实现导航效果代码思路详解
-
实例分享jQuery动态添加.active 实现导航效果代码
-
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享_javascript技巧
-
jQuery实现导航条背景切换效果的代码分享