Several methods and examples of tab switching implementation

Last Update:2017-01-13 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, write down the tab frame, plus the simplest style, the code is as follows:

&lt;! doctype&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;http-equiv= "Content-type" &nbsp;content= "text/html; &nbsp;charset=utf-8 "&nbsp;/&gt; &lt;style&gt; &nbsp;&nbsp;*{&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;
&nbsp;&nbsp;margin:&nbsp;0;
&NBSP;&NBSP} &nbsp;&nbsp;li{&nbsp;&nbsp;&nbsp;&nbsp;list-style:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;float:left; &NBSP;&NBSP} &nbsp;&nbsp; #tabCon {&nbsp;&nbsp;&nbsp;&nbsp;clear:&nbsp;both; &nbsp;&nbsp;} &lt;/style&gt; &lt;/head &gt; &lt;body&gt; &nbsp;&nbsp;&lt;div&nbsp;id= "Tancontainer" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "tab" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt; Title A &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt; title two &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt; title three &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt; Title IV &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "Tabcon" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;div&gt; content One &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; content two &lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; Content III &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; content four &lt;/div &gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

Now the display effect is as follows:

Four tab titles and four content areas are displayed in the page, now to achieve the tab switch effect, that is, click on the title one, the contents of a display, the other content does not show; Click Heading Two, show the contents, and show the other content ...

So, the whole idea is very simple, give four header binding events, trigger the corresponding content display, other content hidden.

Method One: Click on the content of the title to display, not click the title corresponding to the content hidden. The code is as follows:

&lt;! doctype&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;http-equiv= "Content-type" &nbsp;content= "text/html;
&nbsp;charset=utf-8 "&nbsp;/&gt; &lt;style&gt; &nbsp;&nbsp;*{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;0; &NBSP;&NBSP} &nbsp;&nbsp;li{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list-style:&nbsp;none; &nbsp;&nbsp;} &lt;/style &gt; &lt;script&gt; &nbsp;&nbsp;function&nbsp;tab (PID) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;tabs=["Tab1"
, "TaB2", "Tab3", "TAB4"]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var&nbsp;i=0;i&lt;4;i++) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;if (tabs[i]==pid) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
document.getElementById (Tabs[i]). style.display= "Block"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;document.getelementbyid (Tabs[i]). style.display= "None"; &nbsp;&nbsp;&nbsp;&nbsp;&NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} &lt;/script&gt; &lt;/head&gt; &lt;body &gt; &nbsp;&nbsp;&lt;div&nbsp;id= "Tancontainer" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "TabNav" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&nbsp;onclick= "tab (' Tab1 ')" &gt; title one &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;li&nbsp;onclick= "tab (' TaB2 ')" &gt; title two &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;li&nbsp;onclick= "tab (' Tab3 ')" &gt; Title III &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;li&nbsp;onclick= "tab (' Tab4 ')" &gt; title four &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "tab "&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=" tab1 &gt; Content one &lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "TAB2" &gt; Content two &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;div&nbsp;id= "TAB3" &gt; Content three &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id = "TAB4" &gt; Content four &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &lt;/body &gt; &lt;/html&gt;

Method Two: First set all content to hide, and then click on the title to use the content display. The code is as follows:

&lt;! doctype&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;http-equiv= "Content-type" &nbsp;content= "text/html; &nbsp;charset=utf-8 "&nbsp;/&gt; &lt;style&gt; &nbsp;&nbsp;*{&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;
&nbsp;&nbsp;margin:&nbsp;0;
&NBSP;&NBSP} &nbsp;&nbsp;li{&nbsp;&nbsp;&nbsp;&nbsp;list-style:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;float:left;
&NBSP;&NBSP} &nbsp;&nbsp; #tabCon {&nbsp;&nbsp;&nbsp;&nbsp;clear:&nbsp;both; &nbsp;&nbsp;} &nbsp;&nbsp; #tabCon_1 {
&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; &NBSP;&NBSP} &nbsp;&nbsp; #tabCon_2 {&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; &nbsp;&nbsp;} &nbsp;&nbsp; #tabCon _3{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; &nbsp;&nbsp;} &lt;/style&gt; &lt;script&gt; &nbsp;&nbsp;function &nbsp;changetab (tabcon_num) {&nbsp;&nbsp;&nbsp;&nbsp;for (i=0;i&lt;=3;i++) &nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;document.getelementbyid ("Tabcon_" +i). style.display= "None"; &nbsp;//hide all layers &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp; &NBSP;&NBsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getelementbyid ("Tabcon_" +tabcon_num). style.display= "block";//show current layer &nbsp;
&nbsp;&nbsp;}&nbsp; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp;&lt;div&nbsp;id= "Tancontainer" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "tab" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;onclick= "Changetab (' 0 ')" &gt; title one &lt;/li&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;onclick= "Changetab (' 1 ')" &gt; title two &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;onclick= "Changetab (' 2 ')" &gt; Title III &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;li&nbsp;onclick= "Changetab (' 3 ')" &gt; title four &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "Tabcon" &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "Tabcon_0" &gt; Content one &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;div&nbsp;id= "Tabcon_1" &gt; Content two &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "tabcon_2" &gt; Content three &lt;/div &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "tabcon_3" &gt; Content four &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

Method Three: Show and hide through is have class control, first of all the content hidden dispaly set to None, and the class display set as block, traversing all the title node and content node, click on the title, The header node and the right content node have class, but not the other. The code is as follows:

&lt;! doctype&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;http-equiv= "Content-type" &nbsp;content= "text/html; &nbsp;charset=utf-8 "&nbsp;/&gt; &lt;style&gt; &nbsp;&nbsp;*{&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;
&nbsp;&nbsp;margin:&nbsp;0;
&NBSP;&NBSP} &nbsp;&nbsp;li{&nbsp;&nbsp;&nbsp;&nbsp;list-style:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;float:left; &NBSP;&NBSP} &nbsp;&nbsp; #tabCon &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;clear:&nbsp;both; &nbsp;&nbsp;} &nbsp;&nbsp;# tabcon&nbsp;div&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:none; &nbsp;&nbsp;} &nbsp;&nbsp; #tabCon &nbsp;div.fdiv &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:block; &nbsp;&nbsp;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp; &lt;div&nbsp;id= "Tancontainer" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "tab" &gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class= "Fli" &gt; title one &lt;/li
&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt; Title Two &lt;/li&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt; Title III &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;li&gt; title four &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "Tabcon" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div &nbsp;class= "Fdiv" &gt; Content one &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; content two &lt;/div&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; Content III &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; content four &lt; /div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &lt;/body&gt; &lt;script&gt; &nbsp;&nbsp;var
&nbsp;tabs=document.getelementbyid ("tab"). getElementsByTagName ("Li");
&nbsp;&nbsp;var&nbsp;divs=document.getelementbyid ("Tabcon"). getElementsByTagName ("div"); &nbsp;&nbsp;for (var&nbsp;i=0;i&lt;tabs.length;i++) {&nbsp;&nbsp;&nbsp;&nbsp;tabs[i].onclick=function () {Change (
this);} &NBSP;&NBSP} &nbsp;&nbsp;function&nbsp;change (obj) {&nbsp;&nbsP;for (var&nbsp;i=0;i&lt;tabs.length;i++) {&nbsp;&nbsp;&nbsp;&nbsp;if (tabs[i]==obj) {&nbsp;&nbsp;&nbsp;&nbsp;tabs
[I].classname= "Fli";
&nbsp;&nbsp;&nbsp;&nbsp;divs[i].classname= "Fdiv";
&nbsp;&nbsp;}else{&nbsp;&nbsp;&nbsp;&nbsp;tabs[i].classname= ""; &nbsp;&nbsp;&nbsp;&nbsp;divs[i].classname= ""; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}&nbsp; &lt;/script&gt; &lt;/html&gt;

The disadvantage of the

method is that there is no div tag under the div for the content block.

Method Four: Do not use JS, with "input:checked" To do the tab switch, first of all the content hidden, the contents of the selected display. The code is as follows:

&lt;! doctype&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;http-equiv= "Content-type" &nbsp;content= "text/html; &nbsp;charset=utf-8 "&nbsp;/&gt; &lt;title&gt;input:checked tab Switch &lt;/title&gt; &lt;style&gt; input{&nbsp;&nbsp; opacity:&nbsp;0;/* hidden input selection box/} label{&nbsp;&nbsp;cursor:&nbsp;pointer;/* Mouse moved up into a hand-like * * &nbsp;&nbsp;float:&nbsp;
Left label:hover{&nbsp;&nbsp;background:&nbsp; #eee;} input:checked+label{&nbsp;&nbsp;color:&nbsp;red;}///* Select Front has. tabs& Nbsp;input:nth-of-type (x): Checked. Panels&nbsp;.panel:nth-child (x) */Tabs&nbsp;input:nth-of-type (1): checked~.
Panels&nbsp;.panel:nth-child (1),. Tabs&nbsp;input:nth-of-type (2): Checked~.panels&nbsp;.panel:nth-child (2) {
&nbsp;&nbsp;opacity:&nbsp;1; }. panel{&nbsp;&nbsp;opacity:&nbsp;0; &nbsp;&nbsp;position:&nbsp;absolute;/* make the content area position the same as */} &lt;/style&gt; &lt;/head &gt; &lt;body&gt; &nbsp;&nbsp;&lt;div&nbsp;class= "tabs" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp; Checked&nbsp;id= "One" &nbsp;name= "tabs" &nbsp;type= "Radio" &gt; &NBsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for= "One" &gt; Title I &lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;input&nbsp;id= "Two" &nbsp;name= "tabs" &nbsp;type= "Radio" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;
Label&nbsp;for= "Two" &gt; title two &lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= "Panels" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= "Panel" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt; Content One &lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= "Panel" &gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt; Content two &lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt; /div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

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

Several different tab-switching examples

first, imitation of the "Renmin University" official website tab switch , the background is a picture, the effect of the chart is as follows:

Effects when you move the mouse over the news

Effect of mouse move to post

The effect of moving the mouse over the AC

Academic, communicative and stylistic content is empty, I did not write. The complete code is as follows:

&lt;! doctype&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;http-equiv= "Content-type" &nbsp;content= "text/html; &nbsp;charset=utf-8 "&nbsp;/&gt; &lt;style&gt; &nbsp;&nbsp;*{&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;
&nbsp;&nbsp;margin:&nbsp;0; &NBSP;&NBSP} &nbsp;&nbsp;body{&nbsp;&nbsp;&nbsp;&nbsp;font-family:&nbsp;arial,verdana,sans-serif, "XXFarEastFont-Arial"; &nbsp; &NBSP} &nbsp;&nbsp;li{&nbsp;&nbsp;&nbsp;&nbsp;list-style:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;float:left; &nbsp; &NBSP} &nbsp;&nbsp;a{&nbsp;&nbsp;&nbsp;&nbsp;text-decoration:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#
FFEEC6; &NBSP;&NBSP} &nbsp;&nbsp; #tanContainer {&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;210px; &nbsp;&nbsp;&nbsp;&nbsp;
width:&nbsp;470px;
&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;url (homeinfo-trans-bg.png);
&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;
&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp; #ffeec6; &NBSP;&NBSP} &nbsp;&nbsp; #tanContainer &nbsp;li&nbsp;a{&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;25px; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;
&nbsp;&nbsp;&nbsp;&nbsp;margin-left:&nbsp;18px;
&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;12px;
&nbsp;&nbsp;&nbsp;&nbsp;padding-top:&nbsp;12px;
&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:&nbsp;15px; &NBSP;&NBSP} &nbsp;&nbsp;ul&nbsp;li&nbsp;a.fli&nbsp;{&nbsp;&nbsp;} &nbsp;&nbsp; #tabOne {&nbsp;&nbsp;&nbsp;&nbsp;
width:&nbsp;122px;
&nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;0; &NBSP;&NBSP} &nbsp;&nbsp; #tabTwo {&nbsp;&nbsp;&nbsp;&nbsp;padding-left:&nbsp;102px; &nbsp;&nbsp;} &nbsp;&nbsp;# tabcon&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;clear:&nbsp;both; &nbsp;&nbsp;} &nbsp;&nbsp; #tabCon &nbsp;p&nbsp;a{&nbsp;
&nbsp;&nbsp;&nbsp;color:&nbsp; #FFF2D5; &NBSP;&NBSP} &nbsp;&nbsp;div&nbsp;div&nbsp;p{&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;12px; &nbsp;&nbsp;&nbsp;
&nbsp;margin:&nbsp;10px&nbsp;0&nbsp;0&nbsp;20px;
&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;440px; &NBSP;&NBSP} &nbsp;&nbsp; #bigPara {&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;16px; &nbsp;&nbsp;&nbsp;&nbsp;color: &nbsp; #FFF2D5;
&nbsp;&nbsp;&nbsp;&nbsp;border-bottom:&nbsp;1px&nbsp;dotted&nbsp; #FFF2D5;
&nbsp;&nbsp;&nbsp;&nbsp;padding-bottom:&nbsp;5px; &NBSP;&NBSP} &nbsp;&nbsp; #tabCon &nbsp;div&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:none; &nbsp;&nbsp;} &nbsp;&nbsp; #tabCon &nbsp;div.fdiv&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:block; &nbsp;&nbsp;} &lt;/style&gt; &lt;/head&gt; &lt; body&gt; &nbsp;&nbsp;&lt;div&nbsp;id= "Tancontainer" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "tab" &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp; class= "Fli" &nbsp;href= "#" &nbsp;id= "TabOne" &gt; News &lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href= "#" &nbsp;id= "Tabtwo" &gt; Announcements &lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href= "#" &gt; Academic &lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href= "#" &gt; Communication &lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href= "#" &gt; Style &lt;/a&gt;&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;/ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "Tabcon" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= "Fdiv" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;p&nbsp;id= "Bigpara" &gt;&lt;a&nbsp;href= "#" &gt; Cyprus President Nicos Anasta Siadis visits Renmin University &nbsp; won ...&lt;/a&gt;&lt; /p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;a&nbsp;href= "#" &nbsp;title= "The Chinese People's University to carry out special education &nbsp; Carry forward jiao spirit &nbsp; practice "three strict three real" (2015-10-25) &gt; The Chinese People's University to carry out special education &nbsp; promote Jiao Spirit &nbsp; practice "three strict three real" (2015-10-25) &lt;/a&gt;&lt;/ P&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;a&nbsp;href= "#" &gt; The Chinese People's university earnestly implements the main responsibility and supervision responsibility of the party conduct and clean government (2015-10-23) &lt;/a&gt;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;a&nbsp;href= "#" &gt; The fourth session of the Chinese People's University Sports Culture festival opens &nbsp;2015 New Year's meeting (2015-10-18) &lt;/a&gt;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;p&gt;&lt;a&nbsp;href= "#" &gt; Chinese People's University "the way" the chief consultant of the Economic Research Institute held &nbsp; Turkmenistan ambassador to China &lt;/a&gt;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &NBSP;&NBSP;&LT;P&GT;&LT;A&GT;2015-2016 school year first semester 8th Week School Leadership Open Day arrangement ... (2015-10-22) &lt;/a&gt;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;a&gt; About holding the second youth Management Cadre post skill Competition of Renmin University of China. (2015-09-30) &lt;/a&gt;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;a&gt; Our school 16th Chinese University video public class online, please be actively concerned about ... (2015-10-26) &lt;/a&gt;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;a&gt; Notice of organizing the youth teachers of our school to visit the social practice activities of Lu Xun Museum ... (2015-10-23) &lt;/a&gt;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;a&gt; About the holding of the fourth session of the Chinese People's University staff badminton "1+1" group ... (2015-10-23) &lt;/a&gt;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;a&gt; Chinese People's University MOOCs course recording studio equipment acquisition project won the bid ... (2015-10-23) &lt;/a&gt;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &Nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; Content III &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; Content four &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; content five &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div &gt; &nbsp;&nbsp;&lt;/div&gt; &lt;/body&gt; &lt;script&gt; &nbsp;&nbsp;var&nbsp;tabs=document.getelementbyid ("tab")
). getElementsByTagName ("Li");
&nbsp;&nbsp;var&nbsp;divs=document.getelementbyid ("Tabcon"). getElementsByTagName ("div"); &nbsp;&nbsp;for (var&nbsp;i=0;i&lt;tabs.length;i++) {&nbsp;&nbsp;&nbsp;&nbsp;tabs[i].onmouseover=function () {
Change (this);} &NBSP;&NBSP} &nbsp;&nbsp;function&nbsp;change (obj) {&nbsp;&nbsp;for (var&nbsp;i=0;i&lt;tabs.length;i++) {&nbsp; &nbsp;&nbsp;&nbsp;if (tabs[i]==obj) {&nbsp;&nbsp;&nbsp;&nbsp;tabs[i].classname= "Fli"; &nbsp;&nbsp;&nbsp;&nbsp;
Divs[i].classname= "Fdiv"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (i==0) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementById ("Tancontainer"). style.backgroundposition= "0&nbsp;0" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getelementbyid ("
Tancontainer "). style.backgroundposition=" 0&nbsp;-210px "&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; &nbsp;&nbsp;}else{
&nbsp;&nbsp;&nbsp;&nbsp;tabs[i].classname= "";
&nbsp;&nbsp;&nbsp;&nbsp;divs[i].classname= ""; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}&nbsp; &lt;/script&gt; &lt;/html&gt;

This example is very simple also very common tab switch, JS a bit more is to change the position of the background picture, the other is simple style.

two, on a said without JS, with input:checked to achieve the tab switch effect, now use this principle plus CSS3 do a beautiful example, in the switch, the content area is gradually present. The effect chart is as follows:

The effect of HTML/CSS when mouse clicks

When the mouse clicks Ajax Effect

The complete code is as follows:

&lt;! doctype&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;http-equiv= "Content-type" &nbsp;content= "text/html; &nbsp;charset=utf-8 "&nbsp;/&gt; &lt;title&gt;input:checked tab Switch &lt;/title&gt; &lt;style&gt; tabs{&nbsp;&nbsp;
color:&nbsp; #FFF;
&nbsp;&nbsp;font-family:&nbsp; "Microsoft Ya-hei";
input{&nbsp;&nbsp;opacity:&nbsp;0;/* Hide Input selection box */} input:checked+label{&nbsp;&nbsp;padding-bottom:&nbsp;6px;
&nbsp;&nbsp;font-weight:&nbsp;bold; label{&nbsp;&nbsp;cursor:&nbsp;pointer;/* Mouse Move up into hand/&nbsp;&nbsp;float:&nbsp;left; &nbsp;&nbsp;width:&nbsp;
120px;
&nbsp;&nbsp;line-height:&nbsp;40px;
&nbsp;&nbsp;margin-right:&nbsp;5px;
&nbsp;&nbsp;text-align:&nbsp;center; }. Tabs&nbsp;label:nth-of-type (1) {&nbsp;&nbsp;background:&nbsp; #5eb0de; Tabs&nbsp;label:nth-of-type (2) {&nbsp;
&nbsp;background:&nbsp; #86cad7; }. Tabs&nbsp;label:nth-of-type (3) {&nbsp;&nbsp;background:&nbsp; #e9bab3; Tabs&nbsp;label:nth-of-type (4) {&nbsp;
&nbsp;background:&nbsp; #a8c194; } label:hover{&nbsp;&nbsp;font-weight:&nbsp;bOld /* Select front of. Tabs&nbsp;input:nth-of-type (x): Checked. Panels&nbsp;.panel:nth-child (x) * * * Tabs&nbsp;input:nth-of-type
(1): Checked~.panels&nbsp;.panel:nth-child (1) {&nbsp;&nbsp;opacity:&nbsp;1; &nbsp;&nbsp;background:&nbsp; #5eb0de;
&nbsp;&nbsp;-webkit-transition:&nbsp;.3s; }. Tabs&nbsp;input:nth-of-type (2): Checked~.panels&nbsp;.panel:nth-child (2) {&nbsp;&nbsp;opacity:&nbsp;1; &nbsp;
&nbsp;background:&nbsp; #86cad7;
&nbsp;&nbsp;-webkit-transition:&nbsp;.3s; }. Tabs&nbsp;input:nth-of-type (3): Checked~.panels&nbsp;.panel:nth-child (3) {&nbsp;&nbsp;opacity:&nbsp;1; &nbsp;
&nbsp;background:&nbsp; #e9bab3;
&nbsp;&nbsp;-webkit-transition:&nbsp;.3s; }. Tabs&nbsp;input:nth-of-type (4): Checked~.panels&nbsp;.panel:nth-child (4) {&nbsp;&nbsp;opacity:&nbsp;1; &nbsp;
&nbsp;background:&nbsp; #a8c194;
&nbsp;&nbsp;-webkit-transition:&nbsp;.3s; }. panel{&nbsp;&nbsp;opacity:&nbsp;0; &nbsp;&nbsp;position:&nbsp;absolute;/* make the content area position the same as * * &nbsp;&nbsp;height:&nbsp;
200px;
&nbsp;&nbsp;width:&nbsp;455px; &nbsp;&nbsp;margin-top:&nbsp;25px;
&nbsp;&nbsp;padding:&nbsp;0&nbsp;20px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp;&lt;div&nbsp;class= "tabs" &gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;input&nbsp;checked&nbsp;id= "One" &nbsp;name= "tabs" &nbsp;type= "Radio" &gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;label&nbsp;for= "One" &gt;HTML/CSS&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt; Input&nbsp;id= "Two" &nbsp;name= "tabs" &nbsp;type= "Radio" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp; For= "Two" &gt;JavaScript&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;id= "three" &nbsp;name= " Tabs "&nbsp;type=" Radio "&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=" three "&gt;ajax&lt;/label" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;id= "Four" &nbsp;name= "tabs" &nbsp;type= "Radio" &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for= "Four" &gt;Sever&nbsp;Side&lt;/label&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= "Panels" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= "Panel" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;html text label Language &lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;html &nbsp; is the key to the world of &nbsp;WEB&nbsp; technology. html&nbsp; is very easy to learn! You're going to love it! &lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class= "Panel" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 &gt;javascript scripting language &lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;javascript &nbsp; is the most popular scripting language in the world. &lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JavaScript&nbsp; is part of &nbsp;web&nbsp; language, which is suitable for PCs, laptops, tablets and mobile phones. &lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JavaScript&nbsp; was designed to
&nbsp;HTML&nbsp; page adds interactivity. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsP;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= " Panel "&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;ajax ajax &lt;/h2&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;ajax&nbsp;=&nbsp;asynchronous&nbsp;javascript &nbsp;and&nbsp;xml (asynchronous &nbsp;JavaScript&nbsp; and &nbsp;xml). &lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AJAX&nbsp; is not a new programming language, but a new way to use existing standards. &lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AJAX&nbsp; is the art of exchanging data and updating some Web pages with servers,
Without reloading the entire page. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class= "Panel" &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;sever&nbsp;side Server Scripts &lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;SQL&nbsp; is the standard computer language for accessing and processing databasesStatement &lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ASP&nbsp; is a powerful tool for creating dynamic interactive Web pages. &lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ADO&nbsp; means &nbsp;ActiveX&nbsp; Data Object (activex&nbsp;data&nbsp;objects). &lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PHP&nbsp; is a powerful server-side scripting language for creating dynamic interactive sites.
&lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VBScript&nbsp; is a scripting language produced by Microsoft Corporation. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Several methods and examples of tab switching implementation

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Several methods and examples of tab switching implementation

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support