tab

時間 2019-11-20

標籤 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>

相關標籤/搜索

aspxgridview+popup+tab

Tab導航

tab+viewpager+fagment

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。