闲扯 Javascript 01 实现选项卡

javascript 实现选项卡

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

 <script>

 window.onload=function ()

 {

      var oDiv=document.getElementById('div1');

      var aBtn=oDiv.getElementsByTagName('input');

      var aDiv=oDiv.getElementsByTagName('div');

      for(var i=0;i<aBtn.length;i++)

      {

          aBtn[i].index=i;

          aBtn[i].onclick=function ()

          {

           // alert(this.value);

           for(var i=0;i<aBtn.length;i++)

           {

               aBtn[i].className='';

               aDiv[i].style.display='none';

           }

              this.className='active';

              aDiv[this.index].style.display='block';

          };

      }

 };

 </script>

 <body>

 <div id="div1">

 <input class="active" type="button" value="A" />

 <input type="button" value="B" />

 <input type="button" value="C" />

 <input type="button" value="D"/>

    <div style="display:block"> 1月</div>

    <div> 2月2月2月2月2月</div>

    <div> 3月3月3月3月3月3月</div>

    <div> 4月4月4月4月4月4月</div>

 </div>

 </body>

<style>

#div1 .active{ background:#FFFF00;}

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

</style>