jQuery动态添加.active 实现导航效果代码思路详解


Posted in jQuery onAugust 29, 2017

 代码思路:

页面4:

jQuery动态添加.active 实现导航效果代码思路详解

页面5:

jQuery动态添加.active 实现导航效果代码思路详解

代码思路:

通过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 相关文章推荐
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 #jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 #jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 #jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 #jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 #jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 #jQuery
You might like
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
react-router实现按需加载
2017/05/09 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python的垃圾回收机制深入分析
2014/07/16 Python
python实现复制整个目录的方法
2015/05/12 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Python如何读写CSV文件
2020/08/13 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
夜大自我鉴定
2013/10/31 职场文书
销售工作人员的自我评价分享
2013/11/10 职场文书
教学实习自我评价
2014/01/28 职场文书
面试后感谢信
2014/02/01 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
springboot读取nacos配置文件
2022/05/20 Java/Android