写了，你看看，觉得可以欢迎采纳
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>Document</title>
<style>
.navigation
{
width:200px
height:30px
background: #ccc
border:1px solid #ccc
padding: 0
margin: 50px
}
.navigation ul
{
width:200px
height:30px
margin: 0
padding: 0
list-style-type: none
}
.navigation ul li
{
width:80px
height:30px
margin: 0
padding: 0
float: left
text-align: center
line-height: 30px
}
.navigation ul li a
{
text-decoration: none
margin: 0
}
.navigation ul li.active
{
background: #f90
}
</style>
<script>
window.onload=function()
{
var aLi=document.getElementsByTagName('li')
for(var i=0i<aLi.lengthi++)
{
//鼠标移入设置class为active
aLi[i].onmouseover=function()
{
this.className='active'
}
//鼠标移出去掉class
aLi[i].onmouseout=function()
{
this.className=''
}
}
}
</script>
</head>
<body>
<div class="navigation" >
<ul>
<li>
<a href="/">首页</a>
</li>
<li>
<a href="/jianshenfangfa/">健身方法</a>
</li>
</ul>
</div>
</body>
</html>
实现这个效果需要CSS的配合，关键是用JS为当前点击对象添加高亮的样式，并移除其他对象的高亮样式。举例：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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#nav li {float: leftwidth: 80pxtext-align: centerlist-style-type: none}
.nav-active {background: #369}
.nav-active a {color: #fff}
</style>
</head>
<body>
<ul id="nav">
<li class="nav-active"><a href="javascript:">首页</a></li>
<li><a href="javascript:">导航一</a></li>
<li><a href="javascript:">导航二</a></li>
<li><a href="javascript:">导航三</a></li>
<li><a href="javascript:">导航四</a></li>
</ul>
<script src="
<script>
$('#nav').find('li').click(function() {
// 为当前点击的导航加上高亮，其余的移除高亮
$(this).addClass('nav-active').siblings('li').removeClass('nav-active')
})
</script>
</body>
</html>
