有时候需要制作一个导航栏，要使鼠标移上时导航栏变色，点击后再变一种颜色。
Demo：点我查看效果
以下是代码：
HTML中写入1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<div class="nav" id="nav">
<ul>
<li><a href="home.html">主页</a></li>
<li><a href="biography.html">人物生平</a></li>
<li><a href="evaluation.html">人物评价</a></li>
<li><a href="achievement.html">创作成就</a></li>
<li><a href="Artistic-Features.html">艺术特征</a></li>
<li><a href="works.html">作品一览</a></li>
<li><a href="contribution.html">史学贡献</a></li>
<li ><a href="Related-research.html">相关研究</a></li>
</ul>
</div>
<link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
<!--引入jQ-->
<script type="text/javascript" src="../assets/Scripts/jquery.min.js"></script>
<!--引入function.js以控制nav激活颜色-->
<script type="text/javascript" src="../assets/Scripts/function.js"></script>
样式表写入:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30.nav{
margin: 0;
text-align: center;
background-color: #fff7f4;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* border: 1px solid #555;*/
display: inline-block;
}
.nav li {
float: left;
text-align: center;
display:inline-block;
}
.nav li a {
display: block;
color: #000;
padding: 18px 36px;
text-decoration: none;
}
.nav li a:hover {
background-color: #ffebe4;
color: #000;
}
JS:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21/************************************************
*
*导航栏激活变色
*
*控制nav的active类
*当页面加载完成时获取.nav a的href并与window.location比较，一致则给该a赋予样式组cactive
*
*参考：https://blog.csdn.net/u010027670/article/details/79698827
*https://blog.csdn.net/yusirxiaer/article/details/62216550
*
*注意：依托于jquery，需要提前引入jQ
*
*************************************************/
$(document).ready(function(){
$(".nav a").each(function(){
$this = $(this);
if($this[0].href==String(window.location)){
$this.addClass("active");
}
});
});