tab 

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
  *{ margin: 0;padding: 0; }  
  #div1{width: 400px;height: 400px; border: 1px solid #f00; position: relative;}
  #div1 ul{ width: 100%; height: 30px; }
  #div1 ul li{ float: left; background: #ccc;width:32%;text-align:center; margin: 0 1px; height: 30px; line-height: 30px; }
  #div1 ul li.active{ background: #f00 }
  #div1 div{width: 400px; position: absolute; top: 30px; background:#f2f2f2;left: 0;width: 400px;height: 370px;}
</style>
     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script>
    //js实现tab切换
    window.onload=function () {
         var oDiv=document.getElementById('div1');
         var aLi=oDiv.getElementsByTagName('li');
         var aDiv=oDiv.getElementsByTagName('div');
         for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;//索引 写在循环前面
            aLi[i].onclick=function () {  
            //给样式前的清空其他样式             
                 for(var i=0;i<aLi.length;i++){
                    aLi[i].className='';
                    aDiv[i].style.display = 'none'
                 } 
               this.className='active'
               aDiv[this.index].style.display = 'block'
            }

         }
    }
    </script>
</head>
<body>
<div id="div1">
 <ul>
    <li class="active">11</li>
    <li>22</li>
    <li>33</li>   
</ul>   
<div>11</div>
<div>22</div>
<div>33</div>
</div>


    
</body>
</html>

 

posted @ 2016-06-24 16:40  Cutelady  阅读(196)  评论(0)    收藏  举报