下面代码每个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}
<script language="javascript"><!--
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),然后贴上我的代码,就可以了,有什么好解释滴?
多说无益,实践才是真理啊伙计