This article describes the implementation method of js tab. Share it for your reference. The specific analysis is as follows:
1. Ideas
1. Get elements;
2. Add onclick or onmousemove event to loop button element;
3. When clicking the current button, it will be displayed in a highlighted state. Through the for loop, all button styles are set to empty. Set the display of all divs to none.
4. Click the current button to add style, display the current div, and set display to block.
2. HTML code:
<div id="div1"> <input type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <input type="button" value="4"/> <div style="display:block;">11</div> <div>22</div> <div>33</div> <div>44</div></div>
3. CSS part:
.active{background:#9CC;}.div2{width:300px;height:200px; border:1px #66666 solid;display:none;}4. js code:
<script>window.onload=function(){ var odiv=document.getElementById('div1');//Get div var btn=odiv.getElementsByTagName('input');//Get input var div2=odiv.getElementsByTagName('div');//Get div under div for(i=0;i<btn.length;i++)//Loop each button { btn[i].index=i //btn[i] is the i-th button of the specified button; add an index attribute to the button and set the index value to i btn[i].onclick=function()//The i-th click event of the button{ for(i=0;i<btn.length;i++)//Loop remove the button's style and hide the div{ btn[i].className='' //Clear the button's style div2[i].style.display='none'//Hide the div } this.className='active'//Add active div2[this.index].style.display='block'//This.index is the current div } }}</script>I hope this article will be helpful to everyone's JavaScript programming.