How to Implement tab switching using javascript _ 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, see the four implementation principles of tab switching in the previous article "four methods for implementing tab switching using javascript, now it's time to link theory with practice. Here are a few examples.

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

Effect of moving the cursor over the announcement

Effect of moving the mouse over the AC

Academic, communication, and style content is blank. I did not write it. The complete code is as follows:

    
     
 
 
 
 
 
  
  
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

What happens when you click AJAX?

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.