Simple js tab switch effect _ javascript tips-js tutorial

This article mainly introduces how to implement js Tab switching, which has some reference value, if you are interested, you can refer to the examples in this article to introduce the code for implementing the js tab switch effect. 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 is highlighted. You can set all button styles to null through the for loop calendar and set the display of all p to none.
• 4. Click the current button to add a style, display the current p, and set display to block.
  

Html code:

 
           
11
   
22
   
33
   
44
 
 

Css style:

 .active  {  background:#9CC;  } .p2  {  width:300px;  height:200px;  border:1px #666666 solid;  display:none;  }

Js Code:

Script window. onload = function () {var op = document. getElementById ('p1'); // obtain p var btn = op. getElementsByTagName ('input'); // obtain input var p2 = op under p. getElementsByTagName ('P'); // obtain p for (I = 0; I
 
  

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