Four methods for implementing tab switching using javascript _ javascript skills

This article mainly introduces four methods for implementing tab switching in javascript, and evaluates each method. If you are interested, refer to the tabs that are common in Web pages, therefore, four implementation methods have been 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:

The four tab titles and four content areas are displayed on the page. Now you need to implement the tab switching effect, that is, click Title 1. The content is displayed, and other content is not displayed. Click Title 2, content 2 is displayed, other content is not displayed ......
Then, the overall idea is very simple: bind events to four titles, display the corresponding content when triggered, and hide other content.

Method 1: Click the content corresponding to the title to display, and hide the content corresponding to the non-click title.The Code 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.