Simple implementation of the js TAB toggle effect

This article introduces the js TAB switching effect of the detailed code, shared for your reference, the specific content is as follows

Ideas:

1. Get elements; 2. Add onclick(click) or onmousemove(move) event to for loop button element; 3. When the current button is clicked, it will be highlighted, and all button styles will be set to empty through the for loop, while the display of all div will be set to none. 4. Click the current button to add style to display the current div and set display as block.

html code:

 <div id="div1">
  <input type="button" class="active" value="1"/>
  <input type="button" value="2"/>
  <input type="button" value="3"/>
  <input type="button" value="4"/>
   <div 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');// To obtain div
  var btn=odiv.getElementsByTagName('input');// To obtain div Under the input
  var div2=odiv.getElementsByTagName('div') ;// To obtain div Under the div
 
 for(i=0;i<btn.length;i++)// Loop through each button 
  {
   btn[i].index=i //btn[i] Is to specify button The first i A button ; Add for the button 1 a index Properties, and will index Is set to i
   btn[i].onclick=function()// Button first i Single click event 
  {
  for(i=0;i<btn.length;i++)// Cycle to remove button The style of put div hidden 
   {
    btn[i].className='' // Clear the style of the button 
    div2[i].style.display='none'// hidden div
   }
    this.className='active'// Add themselves active
    div2[this.index].style.display='block'//this.index Is the current div
 
 
  }
  }
 
}
</script>

Above is the entire content of this article, I hope to help you with your study.