Two tabs in javascript

This article mainly introduces two examples of implementing tab switching in javascript, which is a further extension of the previous method principle, for more information, refer to this article. This article mainly introduces two examples of implementing tab switching in javascript, which further extends the principles of previous methods. For more information, see

In the previous article "four methods for implementing tab switching in javascript", we talked about the four different implementation principles of tab switching. Now, when the theory is in line with the actual situation, we will write several examples below.

I. Copy the tab switch on the official website of Renmin University of China. The background is the image, as shown below:

Effect of moving the mouse over the news

    
      
 
 
  
  
 
   
News
 
   
Announcement
 
   
Academic
 
   
Communication
 
   
Style
 
  
 
 
 
 
The President of Cyprus, Nikos anstas, visited Renmin University...
 
Renmin University of China carries out special education to promote the spirit of Jiao Yulu and practice "Three strictness and three realities)
 
Renmin University of China implements Party A's main responsibility and supervision responsibility for building a clean government)
 
Opening of the fourth Sports Culture Festival of Renmin University of China held the 2015 New Student sports meeting)
 
China People's University of China's "belt and road" Economic Research Institute head consultant appointment ceremony held by Turkmenistan ambassador to China
  
 
 
Arrangements for reception day of school leaders for the first semester of the academic year 8th)
 
About holding the second job skill competition for young management cadres of Renmin University of China)
 
Our school has launched 16th open video courses for Chinese universities. Please pay close attention to them)
 
Notice on Organizing young teachers in our school to visit the social practice activities of Lu Xun Museum)
 
About holding the Emy of People's University of China's fourth "1 + 1" group association for teaching and badminton)
 
Won the bidding for the equipment purchase project of the Graduate School of China People's University of China for the recording of MOOCs courses)
 
 
Content 3
 
Content 4
 
Content 5
 
 
 Script var tabs = document. getElementById ("tab "). getElementsByTagName ("li"); var ps = document. getElementById ("tabCon "). getElementsByTagName ("p"); for (var I = 0; I
  

This example is a simple and common tab switch. One more thing in js is to change the location of the background image, and the others are simple styles.

2. Use input: checked to implement the tab switching effect. Now we can use this principle and add css3 as a beautiful instance. During the switchover, the content area is gradually becoming available. As follows:

Effect of clicking HTML/CSS with the mouse

The complete code is as follows:

    
   Input: checked to implement tab switching    
  HTML/CSS  JavaScript  AJAX  Sever Side 
 
HTML text label Language
HTML is the key to the WEB technology world. HTML is very easy to learn! You will like it!
 
  
JavaScript scripting language
JavaScript is the most popular scripting language in the world.
JavaScript is a web language applicable to PCs, laptops, tablets, and mobile phones.
JavaScript is designed to add interactivity to HTML pages.
 
 
AJAX
AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML ).
AJAX is not a new programming language, but a new method that uses existing standards.
AJAX is the art of exchanging data with the server and updating some webpages without reloading the entire page.
 
  
Sever Side server script
SQL is a standard computer language used to access and process databases.
ASP is a powerful tool for creating dynamic interactive web pages.
ADO refers to ActiveX Data Objects ).
PHP is a powerful server-side scripting language for creating dynamic and interactive sites.
VBScript is a scripting language developed by Microsoft.
 
  
 
  

For more articles about how to implement tab switching using javascript, refer to PHP Chinese network!