<!-- Nav_a Start -->
#nav_a{
height:33px;
padding-top:5px;
padding-left:5px;
}
#nav_a span{
padding-right:10px;
background:url(images/base_images.jpg) no-repeat right top;
}
#nav_a a:link,#nav_a a:visited{
text-decoration:none;
text-align:center;
width:66px;
padding-top:10px;
padding-bottom:4px;
}
#nav_a a:hover{
color:#FF0000;
background:url(images/button.jpg) no-repeat;
}
<!-- Nav_a End -->
#baseImg{
background:url(images/200812180856440.jpg) repeat-x top;
width:100%;
height:50px;
}
<!-- ˵ʽ -->
.currentButton{
font-weight:bold;
color:#FF0000;
background:url(images/button.jpg) no-repeat;
}
.oldButton{
color:#FFFFFF;
text-decoration:none;
text-align:center;
width:66px;
padding-top:10px;
padding-bottom:4px;
}
</style>
<body onLoad="changeImg('a',1)">
<script>
function changeImg(modtag,index){
for(i=1;i<=6;i++){
if(i==index){
// i ĻʽΪǰʽ
document.getElementById(modtag+i).className="currentButton";
}else{
//ĻĬʽ
document.getElementById(modtag+i).className="oldButton";
}
}
}
</script>
<div id="baseImg">
<div id="nav_a">
<span><a href="#" id="a1" onClick="changeImg('a',1)">a</a></span>
<span><a href="#" id="a2" onClick="changeImg('a',2)">b</a></span>
<span><a href="#" id="a3" onClick="changeImg('a',3)">c</a></span>
<span><a href="#" id="a4" onClick="changeImg('a',4)">d</a></span>
<span><a href="#" id="a5" onClick="changeImg('a',5)">e</a></span>
<span><a href="#" id="a6" onClick="changeImg('a',6)">Test</a></span>
</div>
</div>
</body>