一个JS+CSS样式的导航

来源：互联网发布：淘宝吉他哪家好雅马哈编辑：程序博客网时间：2024/05/17 12:46

#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;
}

#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>