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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 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中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
PHP chr()函数讲解
2019/02/11 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
angularJS模态框$modal实例代码
2017/05/27 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
python算的上脚本语言吗
2020/06/22 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
SQL中where和having的区别
2012/06/17 面试题
管理站站长岗位职责
2013/11/27 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
公司委托书格式范本
2014/09/16 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS