使用 jQuery 实现当前页面高亮显示的通栏导航条
jQuery 实现 显示 页面 当前 高亮 导航条 使用
2023-09-11 14:22:19 时间
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>导航栏</title> <link rel="stylesheet" href="css/test.css" /> <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="js/test.js" ></script> </head> <body> <div class="nav"> <ul class="list"> <li><a href="index.html">首页</a></li> <li><a href="HTML.html">HTML</a></li> <li><a href="CSS.html">CSS</a></li> <li><a href="JS.html">JS</a></li> <li><a href="JQUERY.html">JQUERY</a></li> </ul> </div> <h1>首页</h1> </body> </html>
css.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS</title> <link rel="stylesheet" href="css/test.css" /> <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="js/test.js" ></script> </head> <body> <div class="nav"> <ul class="list"> <li><a href="index.html">首页</a></li> <li><a href="HTML.html">HTML</a></li> <li><a href="CSS.html">CSS</a></li> <li><a href="JS.html">JS</a></li> <li><a href="JQUERY.html">JQUERY</a></li> </ul> </div> <h1>CSS</h1> </body> </html>
HTML.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML</title> <link rel="stylesheet" href="css/test.css" /> <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="js/test.js" ></script> </head> <body> <div class="nav"> <ul class="list"> <li><a href="index.html">首页</a></li> <li><a href="HTML.html">HTML</a></li> <li><a href="CSS.html">CSS</a></li> <li><a href="JS.html">JS</a></li> <li><a href="JQUERY.html">JQUERY</a></li> </ul> </div> <h1>HTML</h1> </body> </html>
JQUERY.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQUERY</title> <link rel="stylesheet" href="css/test.css" /> <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="js/test.js" ></script> </head> <body> <div class="nav"> <ul class="list"> <li><a href="index.html">首页</a></li> <li><a href="HTML.html">HTML</a></li> <li><a href="CSS.html">CSS</a></li> <li><a href="JS.html">JS</a></li> <li><a href="JQUERY.html">JQUERY</a></li> </ul> </div> <h1>JQUERY</h1> </body> </html>
JS.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS</title> <link rel="stylesheet" href="css/test.css" /> <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="js/test.js" ></script> </head> <body> <div class="nav"> <ul class="list"> <li><a href="index.html">首页</a></li> <li><a href="HTML.html">HTML</a></li> <li><a href="CSS.html">CSS</a></li> <li><a href="JS.html">JS</a></li> <li><a href="JQUERY.html">JQUERY</a></li> </ul> </div> <h1>JS</h1> </body> </html>
test.js
$(document).ready(function(){ //获取地址栏的索引 split:转化为数组 window.location.href:具体的地址栏 var index=window.location.href.split("/").length-1; //获取地址栏的前几位 例如index,CSS,jquery var href=window.location.href.split("/")[index].substr(0,4); if(href.length>0){ $(".list li a[href^='"+href+"']").addClass("on") }else{ $(".list li a[href^='index']").addClass("on") } });
test.css
* { margin:0; padding:0; } ul,li { list-style: none; } a{ text-decoration:none; } .nav { width: 100%; height: 40px; background-color: #222; margin-top: 100px; } .list { width: 1000px; height: 40px; margin: 0 auto; } .list li { float:left; } .list li a { color: #aaa; padding: 0 30px; line-height: 40px; display: block; } .list li a:hover{ background: #333; color: #fff; } .list li a.on { background: #333; color: #fff; } h1{ text-align: center; padding: 100px 0; }
效果:
2017-09-23 11:09:20
相关文章
- JQuery基础--事件
- JQuery Mobile+ iscroll 列表滚动条的实现
- jQuery插件开发 总结
- jquery实现动态五角星评分
- jquery实现动态五角星评分
- jQuery 2.0.3 源码分析 Deferred(最细的实现剖析,带图)
- [转载]说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
- JQuery实现对html结点的操作(创建,添加,删除)
- jQuery.unique引发一个血案
- jQuery实现全选、全不选、反选
- 第一百六十三节,jQuery,基础核心
- jQuery获取对象简单实现方法
- jQuery 获取DOM节点的两种方式
- jquery+json的6种ajax请求
- jQuery实现拖动布局并将排序结果保存到数据库
- jquery实现上线翻滚效果公告
- jQuery手机菜单
- paip.提升效率--数据绑定到table原理和流程Angular js jquery实现
- paip.提升效率--数据绑定到table原理和流程Angular js jquery实现
- Jquery超简单遮罩层实现代码
- jquery方法.serializeArray()获取name和value并转为json数组
- jQuery/javascript实现全选全不选
- jquery案例1——jq倒计时、5秒倒计时