使用 jQuery 实现当前页面高亮显示的通栏导航条

Posted 1点

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 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头部高亮显示方法

突出显示当前页面的导航菜单

JS原生代码实现导航高亮

页面刷新跳转后,导航栏高亮显示跳转前的点击位置

jquery实现无刷新显示页面内容

Rails 4:如何使用 jQuery 为当前页面设置导航样式