Recommended three Simple Tab navigation (page tabs) Analysis _ Experience Exchange

Applying tabs in a Web page can make your pages more compact, and combining Ajax technology allows pages to show more content within a limited space. This article mainly introduces several simple tab effect implementation (not involving sliding doors and Ajax), with examples, no pictures, compatibility is good, convenient for everyone to use directly.
The first form: by changing the display style implementation, this is very common, not much to say.

<div id= "Tabs0" >  <ul class= "menu0" id= "menu0" >    <li onclick= "Settab (0,0)" class= "hover" > news </li>    <li onclick= "Settab (0,1)" > Comments </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> review list </li></ul>  </div>  </div>

Second form: This structure is more complex, outside with a relative layer (. menu1box), set overflow hiding, sets the tab (#menu1) to absolute positioning, and sets the layer pointer to 1 (z-index:1;) so that it can cover the main block (. Main1box ) Height of 1px. Set the border of the main block to a black edge of 1px, and the upper space (margin-top) to -1px, so that the top frame is stretched to the tab. When you change the background of a tab item (LI) to white, you can mask the top border of a portion of the main block. This effect is achieved.

<div id= "TABS1" >  <div class= "Menu1box" >    <ul id= "menu1" >     <li class= "hover" Onmouseover= "Settab (1,0)" ><a href= "#" > News </a></li>    <li onmouseover= "Settab" > <a href= "#" > Comments </a></li>     <li onmouseover= "Settab" ><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> review list </li></ul>    </div>  </div>  </div>

The first to second type of JS code:

function Settab (m,n) {  var Tli=document.getelementbyid ("menu" +m). getElementsByTagName ("Li");/* Gets the Li object for the tab */  var Mli=document.getelementbyid ("main" +m). getElementsByTagName ("ul");/* Gets the 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, or use the. Hover style if the item is selected */    mli[i].style.display=i==n? " Block ":" None "; /* Determine which object is displayed in the main area */  }  }

Third form: This is also an uncommon way to add a relative layer (. menu2box), using a background layer (#tip2) to locate the effect by changing the left side of the layer.

<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>

Effect Demo:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 


The above is recommended three kinds of concise tab navigation (page tab) Analysis _ Experience Exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!
