jQuery动态添加.active 实现导航效果代码思路详解
更新时间：2017年08月29日 11:07:01 作者：Snper
这篇文章主要介绍了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 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> </div> </body>
总结
以上所述是小编给大家介绍的jQuery动态添加.active 实现导航效果代码思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了jQuery横向擦除焦点图特效，一个具有自己特色的焦点图会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的焦点图，感兴趣的小伙伴可以参考下。2015-09-09
这篇文章主要介绍了jQuery实现点击按钮弹出可关闭层的浮动层插件,具有点击弹出带有遮罩层的浮动层效果,且浮动层可拖动、可关闭,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了jQuery纵向导航菜单效果实现方法,可实现类似淘宝首页纵向菜单的显示效果,涉及jQuery鼠标响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了JQuery中extend怎么使用,需要的朋友可以参考下2014-03-03
jQuery Easyui datagrid连续发送两次请求问题
用上述方式动态加载datagrid的数据时，通过net监听，发现调用了两遍XX方法，目前的解决方案是，将url放到datagrid初始化的时候执行2016-12-12
在toggle()方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这个函数轮番调用,在函数之间切换调用的时候相当的方便,接下来将会详细介绍toggle()方法的使用，感兴趣的你可不要错过了啊2013-02-02
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。本文给大家介绍ztree获取选中节点时不能进入可视区域出现BUG如何解决的相关资料，对ztree获取选中节点感兴趣的朋友一起学习吧2015-12-12
在很多时候，我们都不是一步就将所有信息填写完整，然后提交。而是分步进行填写表单2011-03-03
12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能，用于在有限的网页空间内展示一组产品图片或者照片，同时还有非常吸引人的动画效果,本文向大家推荐12款实用的 jQuery 图片轮播效果插件感兴趣的朋友可以了解下哦2013-01-01
下面小编就为大家带来一篇jquery插件方式实现table查询功能的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论