使用 jQuery 实现当前页面高亮显示的通栏导航条
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+JS实现智能浮动定位导航条
实现原理 主要用到几个知识点: 什么是scrollTop? CSS position定位 判断是否为IE6浏览器 元素相对于窗口的距离 原理:1,浏览器向下滚动时,当document的scrollTo ...
- jquery控制滚动条改变上面固定(fixed)导航条或者搜索框的属性
<script type="text/javascript"> $(document).ready(function(){ $(window).scroll( func ...
- jquery实现可以中英切换的导航条
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- Swift - 使用导航条和导航条控制器来进行页面切换
通过使用导航条(UINavigationBar)与导航条控制器(UINavigationController)可以方便的在主页面和多层子页面之间切换.下面通过一个简单“组件效果演示”的小例子来说明如何 ...
- 基于jQuery滑动分步式进度导航条代码
分享一款基于jQuery滑动分步式进度导航条代码.这是一款基于jquery实现的网站注册动态步骤导航条代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=& ...
- jquery加载页面的方法
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&q ...
- jquery加载页面的方法(页面加载完成就执行)
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&qu ...
- jQuery自定义Web页面鼠标右键菜单
jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...
- jquery如何获得页面元素的坐标值
http://www.cnblogs.com/pansly/archive/2011/05/25/2056222.html jquery如何获得页面元素的坐标值 yulutxt是输入经典语录的输入 ...
随机推荐
- CSS9:动态 REM-手机专用的自适应方案
CSS9:动态 REM-手机专用的自适应方案 动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,例如 : taobao.com 是专门的PC端m.taobao.com 是专门的手机端, ...
- Java中避免空指针常见的方法
什么是空指针? 当一个变量的值为null时,在Java里表示一个不存在的空对象,没有实际内容,没有给它分配内存,null也是对象成员的默认值.所以,一个对象如果没有进行初始化操作,这时如果调用这个对象 ...
- JavaSE---多线程---扩展
1.线程的类型 1.1 用户线程 1.2 内核线程 2.java线程 java线程的创建依赖于系统内核,通过JVM调用系统库创建内核线程: 内核线程与java-Thread是1:1的映射关系: 3.线 ...
- Linux批量新建文件夹（大括号表达式的应用）
如果想要批量新建文件夹来存放照片,按照年份和月份,格式为YYYY-MM.可以使用下面命令批量新建: mkdir {2007..2009}-{01..12} 结果如下: 2007-01 2007-07 ...
- jenkins 更改端口
方法一 在Jenkins目录下,运行一下命令: java -jar jenkins.war --ajp13Port=-1 --httpPort=8081 出现了错误: C:\Program Files ...
- SQLServer 链接服务器及同义词
链接服务器 1. openrowse exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'Ad Hoc ...
- windows系统的安装时间怎么查看
方法一:利用命令符窗口查询 直接按下Windows+R组合键 出现运行对话框(或 点击开始—运行),输入cmd,进入命令符窗口 然后,在该界面下输入”systeminfo”,然后回车,等待系统自动运 ...
- BUUCTF | SQL COURSE 1
一开始还以为是在登录框进行注入,于是fuzzing了一下发现一个注入点都没有 1 and 1 1 and 0 1' and '1 1' and '0 1" and "1 1&quo ...
- nodejs 程序(有的功能和前端js是不一样的)
node文档:http://nodejs.cn/api/ 1.控制台输出 (node的输出是在命令框中输出的): 有颜色的输出 :console.log('\x1B[33m%s\x1b[0m:', p ...
- html标签内部简单加js 一维数组求最大值 最小值两个值位置和数字金字塔图形
html标签内部,简单加js <a href=""></a><!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...