JavaScript Demo---最简单的菜单切换效果

来源：互联网发布：我想开淘宝网店怎么开编辑：程序博客网时间：2024/06/05 15:16
<!DOCTYPE html><html lang="en"><head><style type="text/css">    ul{list-style: none;width: 300px;margin:0 auto;height:30px;padding-left: 0px;}    li:hover{background-color: #ccc;color:red;}    .li-current {background-color: #ccc;color:red;}    li{float:left;border:1px solid #000;width: 98px;text-align: center;height: 28px;}    .tab-list{width: 298px;height:270px;border:1px solid #000;margin:0 auto;clear:both;position: relative;}    .tab-list div{width: 298px;height:270px;position: absolute;    opacity:0;filter:alpha(opacity=0);}    .tab-list .current{opacity:1;filter:alpha(opacity=100);}</style>    <meta charset="UTF-8">    <title>Document</title></head><body> <ul id="control-menu">      <li>001</li>      <li>002</li>      <li>003</li> </ul>   <div class="tab-list" id="tab-list">      <div class="current">0001</div>      <div >0002</div>      <div >0003</div>  </div>  <script type="text/javascript">      window.onload=function(){          var oUl=document.getElementById('control-menu');          var aLi=oUl.getElementsByTagName('li');          var oDiv=document.getElementById('tab-list');          var options=oDiv.getElementsByTagName('div');          var i=0;        for (i;i<aLi.length ; i++) {        aLi[i].index=i;         aLi[i].onmouseover=function(){              show(this.index);         }                   }          function show(a){        for (var j = 0;j<aLi.length ; j++ ) {            options[j].className="";//清除原有样式            aLi[j].className="";        }        options[a].className="current";        aLi[a].className="li-current";          }      }  </script></body></html>
效果图：
0 0