« 表单内容直接提交到邮箱asp.net实现伪静态 »

不刷新点击链接换背景图片,点击其它链接背景图片还原

css:
#tab{width:100%;height:39px;background:url(../images/listbg.gif) left top repeat-x;color:#666666;}
li{ float:left; background:url(../images/button.gif) no-repeat; height:39px; width:138px;line-height:45px; text-align:center}
li a{ text-decoration:none; width:138px; height:39px; display:block; color:#333333;}
li.on{ background:url(../images/button_active.gif) no-repeat; height:39px; width:138px;line-height:45px;}
 

html:

<div id="tab">
<ul>
        <li class="on"><a href="#">食物信息管理</a></li> <!-- 默认选中第一个 -->
        <li><a href="#">病症信息管理</a></li>
        <li><a href="#">生化指标管理</a></li>
        <li><a href="#">正常营养素摄入量</a></li>
        <li><a href="#">病症营养参数摄入量</a></li>
    </ul>
    <script type="text/javascript">
var li=document.getElementsByTagName("li");
for(i=0; i<li.length; i++){
   li[i].onclick=add;
   }
function add(){
li=document.getElementsByTagName("li");
for(i=0; i<li.length; i++){
   li[i].className=""
   }
   if(this.className==""){
    this.className="on";
   }else{
    this.className=""
   }
}
</script>
</div>


 

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。