闲扯 Javascript 01 实现选项卡

javascript 实现选项卡

今天下午的两节课，在机房闲来没事，就学习了javascript 怎么获取HTML的标签，改变CSS样式，资料来源智能社！

 1 <script>
 2 
 3 window.onload=function ()
 4 {
 5      var oDiv=document.getElementById('div1');
 6      var aBtn=oDiv.getElementsByTagName('input');
 7      var aDiv=oDiv.getElementsByTagName('div');
 8      for(var i=0;i<aBtn.length;i++)
 9      {
10          aBtn[i].index=i; 
11          aBtn[i].onclick=function ()
12          {
13           // alert(this.value);
14           for(var i=0;i<aBtn.length;i++)
15           {   
16               aBtn[i].className='';
17               aDiv[i].style.display='none';
18           }
19              this.className='active';    
20              aDiv[this.index].style.display='block';
21          };
22      }
23      
24     
25 };
26 
27 </script>

 1 <body>
 2 <div id="div1">
 3 <input class="active" type="button" value="A" />
 4 <input type="button" value="B" />
 5 <input type="button" value="C" />
 6 <input type="button" value="D"/>
 7 
 8      
 9    <div style="display:block"> 1月</div>  
10    <div> 2月2月2月2月2月</div>
11    <div> 3月3月3月3月3月3月</div>  
12    <div> 4月4月4月4月4月4月</div>
13 
14 
15 </div>
16 
17  
18 </body>

1 <style>

3 #div1 .active{ background:#FFFF00;}

4 #div1 div{ width:150px; height:200px; background:#CCCCCC; border:1px solid #CCCCCC; display:none;}

5 </style>

posted on 2014-04-17 00:55 知鸟阅读(212) 评论(0) 编辑收藏举报