Simple js tab switch effect, js tab Switch

Simple js tab switch effect, js tab Switch

This article introduces the code for implementing the js tab switch effect and shares it with you for your reference. The details are as follows:

Ideas:

• 1. Obtain elements;
• 2. Add an onclick or onmousemove event to the for loop button element;
• 3. When you click the current button, it will be highlighted. You can use the for loop to set all button styles to null and set the display of all divs to none.
• 4. Click the current button to add a style, display the current div, and set display 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 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 '); // obtain div var btn = odiv. getElementsByTagName ('input'); // obtain the input var div2 = odiv under the div. getElementsByTagName ('div '); // obtain the div for (I = 0; I <btn. length; I ++) // loop each button {btn [I]. index = I // btn [I] indicates the I button of the specified button. Add an index attribute for 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 ++) // remove the button style cyclically and hide the div {btn [I]. className = ''// the style of the clear button div2 [I]. style. display = 'none' // hide div} this. className = 'active' // Add active div2 [this. index]. style. display = 'block' // this. index is the current div }}</script>

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• A js encapsulated good tab effect code
• Js tab
• JQuery tab effect (separation of JS and HTML)
• Code for implementing the tab function in js
• Cross-browser common and reusable tab switch js Code
• Examples of implementing the special effect of tabs using js
• Switch the tabs tab using javascript (self-writing native js)
• Example of hiding when jsp js mouse moves to a specified area to display the tab to exit
• Js/jQuery simple implementation of the tab Function