Applying tabs to your Web pages makes your pages more compact, and combining Ajax technology allows you to show more content in a limited space. This article mainly introduces the implementation of several Simple tab effects (not involving sliding doors and Ajax), with examples, no pictures, good compatibility, convenient for everyone to use directly.
The first form: by changing the display style implementation, this is very common, do not say more.
Copy Code code as follows:
<div id= "Tabs0" >
<ul class= "menu0" id= "menu0" >
<li onclick= "Settab (0,0)" class= "hover" > News </li>
<li onclick= "Settab (0,1)" > Review </li>
<li onclick= "Settab (0,2)" > Technology </li>
<li onclick= "Settab (0,3)" > Reviews </li>
</ul>
<div class= "main" id= "Main0" >
<ul class= "block" ><li> News list </li></ul>
<ul><li> Comments List </li></ul>
<ul><li> Technology List </li></ul>
<ul><li> Reviews List </li></ul>
</div>
</div>
The second form: This structure is more complex, the outside with a relative layer (. menu1box), set overflow hidden, the tab (#menu1) set to absolute positioning, set the layer pointer to 1 (z-index:1;), so that you can cover down the main block (. main1box) 1px height. Sets the main block's border to a 1px black edge, and the top blank (margin-top) is -1px so that the top box is placed under the tab. The top border of a part of the main block can be obscured by changing the background of a tab (LI) to white. So the effect is realized.
Copy Code code as follows:
<div id= "TABS1" >
<div class= "Menu1box" >
<ul id= "Menu1" >
<li class= "hover" onmouseover= "Settab (1,0)" ><a href= "#" > News </a></li>
<li onmouseover= "Settab (1,1)" ><a href= "#" > Comments </a></li>
<li onmouseover= "Settab (1,2)" ><a href= "#" > Technology </a></li>
<li onmouseover= "Settab (1,3)" ><a href= "#" > Reviews </a></li>
</ul>
</div>
<div class= "Main1box" >
<div class= "main" id= "Main1" >
<ul class= "block" ><li> News list </li></ul>
<ul><li> Comments List </li></ul>
<ul><li> Technology List </li></ul>
<ul><li> Reviews List </li></ul>
</div>
</div>
</div>
First to second form of JS code:
Copy Code code as follows:
function Settab (m,n) {
var Tli=document.getelementbyid ("menu" +m). getElementsByTagName ("Li"); /* Get the Li object of the tab/*
var Mli=document.getelementbyid ("main" +m). getElementsByTagName ("ul"); /* Get main Display Area Object * *
for (i=0;i<tli.length;i++) {
Tli[i].classname=i==n? " Hover ":" "; /* Change the style of the Li object for the tab, if the selected item is used. Hover Style * *
Mli[i].style.display=i==n? " Block ": none"; /* Determine which object is displayed in the primary area.
}
}
The third form: This is also a less common way to add a relative layer (. menu2box), using a background layer (#tip2) to position, by changing the left side of the layer to achieve the effect.
Copy Code code as follows:
<div id= "TABS2" >
<div class= "Menu2box" >
<div id= "TIP2" ></div>
<ul id= "MENU2" >
<li class= "hover" onmouseover= "Nowtab (2,0)" ><a href= "#" > News </a></li>
<li onmouseover= "Nowtab (2,1)" ><a href= "#" > Comments </a></li>
<li onmouseover= "Nowtab (2,2)" ><a href= "#" > Technology </a></li>
<li onmouseover= "Nowtab (2,3)" ><a href= "#" > Reviews </a></li>
</ul>
</div>
<div class= "main" id= "Main2" >
News content
</div>
</div>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html;charset=gb2312 "/> <title> simplicity tab</title> <style type=" Text/css "> <!--body,div,ul, li{margin:0 Auto; padding:0; body{font:12px "Song Body"; Text-align:center; a:link{color: #00F; Text-decoration:none; } a:visited {color: #00F; Text-decoration:none; } a:hover {color: #c00; Text-decoration:underline; } ul{List-style:none; }. main{Clear:both; padding:8px; Text-align:center; }/* The first form */#tabs0 {height:200px; width:400px; border:1px solid #cbcbcb; Background-color: #f2f6fb; }. menu0{width:400px; }. menu0 li{display:block; Float:left; PADDING:4PX 0; width:100px; Text-align:center; Cursor:pointer; Background: #FFFFff; }. menu0 li.hover{ Background: #f2f6fb; } #main0 ul{Display:none; } #main0 ul.block{Display:block; }/* The second form/* * #tabs1 {text-align:left; width:400px; }. menu1box{position:relative; Overflow:hidden; height:22px; width:400px; Text-align:left; } #menu1 {Position:absolute; top:0; left:0; Z-index:1; } #menu1 li{Float:left; Display:block; Cursor:pointer; width:72px; Text-align:center; line-height:21px; height:21px; #menu1 li.hover{background: #fff; border-left:1px solid #333; border-top:1px solid #333; border-right:1px solid #333; }. main1box{Clear:both; margin-top:-1px; border:1px solid #333; height:181px; width:400px; } #main1 ul{Display:none; } #main1 ul.block{Display:block; }/* The third form of/* menu2box{position:relative; Overflow:hidden; height:22px; width:400px; Text-align:left; Background: #FFFFff; } #tabs2 {height:200px; width:400px; border:1px solid #cbcbcb; Background-color: #f2f6fb; } #tip2 {Position:absolute; top:0; left:0; height:22px; line-height:22px; z-index:0; width:100px; Background: #f2f6fb; } #menu2 {Position:absolute; top:0; left:0; Z-index:1; } #menu2 li{Display:block; Float:left; PADDING:4PX 0; width:100px; Text-align:center; Cursor:pointer; --> </style> <script> <!--/* The first form of the second form replace the display style/function Settab (m,n) {var Tli=document.getel Ementbyid ("menu" +m). getElementsByTagName ("Li"); var Mli=document.getelementbyid ("main" +m). getElementsByTagName ("ul"); for (i=0;i<tli.length;i++) {tli[i].classname=i==n? Hover ":" "; Mli[i].style.display=i==n? " Block ": none"; }/* The third form uses a background layer to position/var m3={0: "", 1: "Comment Content", 2: "Technical Content", 3: "Comments on Content"} function Nowtab (m,n) {if (n!=0&&m3[0]== "") m3 [0]=document.getelementbyid ("Main2"). InnerHTML; document.getElementById ("Tip" +m). style.left=n*100+ ' px '; document.getElementById ("Main2"). Innerhtml=m3[n]; }//--> </script> </peaD> <body> <!--the first form of--> <div id= "Tabs0" > <ul class= "menu0" id= "menu0" > <li oncl ick= "Settab (0,0)" class= "hover" > News </li> <li onclick= "Settab (0,1)" > Review </li> <li onclick= "sett AB (0,2) "> Technology </li> <li onclick=" Settab (0,3) "> Reviews </li> </ul> <div class=" main "id=" Main0 " > <ul class= "block" ><li> News list </li></ul> <ul><li> comments List </li></ul> <ul><li> Technology List </li></ul> <ul><li> Reviews list </li></ul> </div> </ Div> <!--the second form of--> <div id= "TABS1" > <div class= "Menu1box" > <ul id= "menu1" > < Li class= "hover" onmouseover= "Settab (1,0)" > News </li> <li onmouseover= "Settab (1,1)" > Comments </li> < Li onmouseover= "settab (1,2)" > Technology </li> <li onmouseover= "Settab (1,3)" > Reviews </li> </ul> </ Div> <div class= "main1box "> <div class=" main "id=" Main1 "> <ul class=" block "><li> News list </li></ul> < Ul><li> Comments List </li></ul> <ul><li> Technology list </li></ul> <ul><li> Reviews list </li></ul> </div> </div> </div> <!--the third form--> <div id= "TABS2" > <div class= "Menu2box" > <div id= "tip2" ></div> <ul id= "menu2" > <li class= "hover" Onmo Useover= "Nowtab (2,0)" > News </li> <li onmouseover= "Nowtab (2,1)" > Comments </li> <li onmouseover= "Nowta B (2,2) "> Technology </li> <li onmouseover=" nowtab (2,3) "> Comments </li> </ul> </div> <div cl ass= "main" id= "main2" > news content </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
