Four methods to implement tab switching using javascript

This article mainly introduces four methods for implementing tab switching in javascript, and evaluates each method, interested friends can refer to this article to introduce four methods for implementing tab switching in javascript, and evaluate each method. Interested friends can refer

Tab switching is common in Web pages. Therefore, four methods are summarized recently.
First, write the tab framework and add the simplest style. The Code is as follows:

  
    
  
  
 
 
   
  
  
Title 1
   
  
  
Title 2
   
  
  
Title 3
   
  
  
Title 4
  
 
 
  
  
  
Content 1
  
Content 2
  
Content 3
  
Content 4
  
 
  

The current display effect is as follows:

    
  Script function tab (pid) {var tabs = ["tab1", "tab2", "tab3", "tab4"]; for (var I = 0; I <4; I ++) {if (tabs [I] = pid) {document. getElementById (tabs [I]). style. display = "block";} else {document. getElementById (tabs [I]). style. display = "none" ;}} script  
  
  
 
 
   
  
  
Title 1
   
  
  
Title 2
   
  
  
Title 3
   
  
  
Title 4
  
 
 
  
  
   
Content 1
  
Content 2
   
Content 3
  
Content 4
  
 
  

Method 2: First hide all the content, and then click the title pair to display the content.The Code is as follows:

    
  Script function changeTab (tabCon_num) {for (I = 0; I <= 3; I ++) {document. getElementById ("tabCon _" + I ). style. display = "none"; // hide all layers} document. getElementById ("tabCon _" + tabCon_num ). style. display = "block"; // display the current layer} script  
  
  
 
 
   
  
  
Title 1
   
  
  
Title 2
   
  
  
Title 3
   
  
  
Title 4
  
 
 
 
  
  
Content 1
  
Content 2
  
Content 3
  
Content 4
 
 
  

Method 3: display and hide are controlled by class. The dispaly of all content is set to none, and the display of the class is set to block, traverse all the title nodes and content nodes. After clicking the title node, the title node and the target content node have a class, but none of them exist.The Code is as follows:

    
     
  
  
 
 
   
  
  
Title 1
   
  
  
Title 2
   
  
  
Title 3
   
  
  
Title 4
  
 
 
  
  
  
Content 1
  
Content 2
  
Content 3
  
Content 4
 
 
 Script var tabs = document. getElementById ("tab "). getElementsByTagName ("li"); var ps = document. getElementById ("tabCon "). getElementsByTagName ("p"); for (var I = 0; I
 

The disadvantage of this method is that there cannot be any p tag under the p of the content block.

Method 4: Without js, use "input: checked" for tab switching. First, hide all the content and display the selected content.The Code is as follows:

    
  Input: checked to implement tab switching    
    Title 1     Title 2   
   
   
Content 1
   
   
   
Content 2
   
  
 
  

The disadvantage of this method is that different regions can only be switched by clicking.

The above is the implementation method of tab switching summarized for everyone. I hope it will be helpful for everyone's learning. Follow this idea to create your own tab switching special effect.

For more information about the four methods for implementing tab switching using javascript, refer to the PHP Chinese website!