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

本文介绍了一个简单的选项卡效果实现方法,通过HTML结构定义、CSS样式美化及JavaScript交互控制完成。该示例利用了:hover伪类实现鼠标悬停效果,并通过JavaScript动态切换显示的内容。
<!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>
效果图:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值