首页 > web前端 > js教程 > 正文

实例分享jQuery动态添加.active 实现导航效果代码

小云云
发布: 2017-12-29 11:45:44
原创
1960 人浏览过

本文主要介绍了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实现定位导航效果

微信小程序顶部可滚动导航效果

原生js实现电商侧边导航效果

以上是实例分享jQuery动态添加.active 实现导航效果代码的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!