<!--
function changeEl(El){
try{
if(typeof El != "object") {
return
}
var els = document.all("ttttt")
if(typeof els == "object" &&els != null){
if(!els.length)els = [els]
for(var i in els){
els[i].setAttribute("id", "pageLinks")
}
}
El.setAttribute("id", "ttttt")
}catch (E){}
}
//-->
</script>
ID名ttttt是高亮样式，pagelinks是默认样式，调用ttttt是把这样默认的覆盖掉，这样调用<div id="pageLinks" onClick="changeEl(this)"><a href="#">123</a>
定义两个ID样式（#pageLinks和#ttttt），然后贴上我的代码，就可以了，有什么好解释滴？
多说无益，实践才是真理啊伙计
一般当前高亮都是后台程序判断实现的，不是css做的，要用css做也行，只是麻烦点，要给每个栏目的<body>加上ID，这样做造成的麻烦是弄后台程序的时候不能把<body>这行直接写入页头包含文件之中：
下面代码每个body都有自己的ID来识别当前是什么栏目，导航栏每个li也加了class：
------------首页html------------
<body id="home">
<div class="menu">
<ul>
<li class="home"><a>首页</a></li>
<li class="about"><a>介绍</a></li>
<li class="news"><a>新闻</a></li>
<li class="job"><a>招聘</a></li>
</ul>
</div>
</body>
------------介绍页html------------
<body id="about">
...
</body>
------------新闻页html------------
<body id="news">
...
</body>
===============
Css code：
===============
/*导航按钮的默认样式*/
.menu li a{color:#000}
/*当前栏目高亮样式*/
#home .menu .home a ,
#about .menu .about a ,
#news .menu .news a ,
#job .menu .job a{color:red}
实现这个效果需要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>
