使用 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是输入经典语录的输入 ...
随机推荐
- AI比医生更好地发现皮肤癌，未来计算机技术可渗透医院
未来机器人将取代医生?这可能是事实.为什么这么多年轻人选择计算机行业,因为这是一个趋势.据法新社报道,研究人员周二称,一项计算机技术比人类皮肤科医生在检测皮肤癌方面的表现要好得多,因为这项研究是为了寻 ...
- web项目问题总结
1.项目编码问题:建立项目之初,应统一设置项目组所有电脑的eclipse 默认项目编码,还有各个文件的编码格式 中文乱码的问题,需要三个地方同时设置utf-8编码,第一是数据库里表的编码,第二是jsp ...
- 前端开发本地存储之localStorage和sessionStorage
1.localStorage 概念 HTML5 web 存储:HTML5 提供了两种在客户端存储数据的新方式:localStorage 和 sessionStorage ,两者都是仅在客户端(即浏览器 ...
- flutter页面布局二
Stack 在flutter中,Stack表示堆的意思,可以用来实现页面的定位布局. Stack组件接收两个可选参数: alignment:配置所有子元素的显示位置 children:子组件 在 ...
- （转）教你分分钟搞定Docker私有仓库Registry
转:https://www.cnblogs.com/Javame/p/7389093.html 一.什么是Docker私有仓库Registry 官方的Docker hub是一个用于管理公共镜像的好地方 ...
- PHP连接FTP服务的简单实现
PHP连接FTP服务: <?php class Ftp { private $connect; private $getback; /** * ftp连接信息 * @var array */ p ...
- JavaScript-Tool-截取头像：ShearPhoto
ylbtech-JavaScript-Tool-截取头像:ShearPhoto ShearPhoto 2.0 发布,支持HTML5本地截取头像,支持美图秀秀特效,支持几十M数码相片压缩截取 1.返回顶 ...
- 图解HTTP 读书笔记
1 了解Web及网络基础 1.1 HTTP/1.0 HTTP正式作为标准被公布实在1996年五月,版本命名为HTTP/1.0,记载于RFC1945.至今仍广泛使用在服务器端. RFC1945 – ...
- configure error C compiler cannot create executables错误解决
我们在编译软件的时候,是不是经常遇到下面的错误信息呢? checking build system type... i686-pc-linux-gnuchecking host system ty ...
- centos6.2 shutdown now关机进入单用户模式
在centos5.5时当我们输入 shutdown now 系统会进入关机状态.而centos6.2时并非如此,其他版本不清楚,而进入了单用户模式.(进入系统后想维护可做此操作.)会出现如下提示:(注 ...