直播微信小程序是啥_jQuery动态添加.active 完成导

2021-01-11 14:53 admin
jQuery动态添加.active 实现导航效果代码思路详解       这篇文章主要介绍了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 
 div 
 " rel="external nofollow" class="" 页面1 /a /li 
 " rel="external nofollow" class="" 页面2 /a /li 
 " rel="external nofollow" class="" 页面3 /a /li 
 " rel="external nofollow" class="" 页面4 /a /li 
 " rel="external nofollow" class="" 页面5 /a /li 
 /ul 
 /div 
 /body 

总结

以上所述是小编给大家介绍的jQuery动态添加.active 实现导航效果代码思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!