Simple Realization JS tab switch effect _javascript skill

This article introduces the implementation of JS tab Switching effect of the detailed code, share for everyone to reference, the specific content as follows

Ideas:

• 1, get the element;
• 2, for loop button element add onclick (click) or onmousemove (move in) event;
• 3, click the current button will be highlighted in the state of the display, through the For loop calendar all the button style set to NULL in the all div display set to none.
• 4, click the current button to add style, the current Div displayed, display set to block.
  

HTML code:

 <div id= "Div1" >
  <input type= "button" class= "Active" value= "1"/> <input type=
  "button" value= "2"/>
  <input type= "button" value= "3"/> <input "
  button" type= "4" value=/>
   class = "Div2" style= "Display:block"; >11</div>
   <div class= "Div2" >22</div>
   <div class= "Div2" >33</div>
   <div class= "Div2" >44</div>
 </div>
 

CSS style:

 . Active
  {
  background: #9CC;
  }
 . Div2
  {
  width:300px;
  height:200px;
  border:1px #666666 solid;
  Display:none;
  }

JS Code:

<script>
window.onload=function () {
 
  var Odiv=document.getelementbyid (' Div1 ');//Get Div
  var btn =odiv.getelementsbytagname (' input '); get the input
  var div2=odiv.getelementsbytagname (' div ') under the DIV;//get div under div For
 
 (i=0;i<btn.length;i++)/loop each button
  {
   btn[i].index=i//btn[i] is the first button of the specified button; Adds an index property to the button and sets the value of index to I
   btn[i].onclick=function ()// button of the first click event
  {for
  (i=0;i<btn.length;i++)//Loop Remove button style, the div hide
   {
    btn[i].classname= '/ Empty button style
    div2[i].style.display= ' none '//Hide div
   }
    this.classname= ' active '//Self add active
    div2[ this.index].style.display= ' block '//this.index is current div}}}
</script>

The above is the entire content of this article, I hope to help you learn.