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>
2
3 #div1 .active{ background:#FFFF00;}
4 #div1 div{ 150px; height:200px; background:#CCCCCC; border:1px solid #CCCCCC; display:none;}
5 </style>