Three simple, classic and efficient div+css-made tab navigation analysis

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.

CSS Code

2. <div id="Tabs0" >
4. <ul class="menu0" id="menu0" >
6. <li onclick="Settab (0,0)" class="hover" > news </li>
8. <li onclick="Settab (0,1)" > Comments </li>
10. <li onclick="Settab (0,2)" > Technology </li>
12. <li onclick="Settab (0,3)" > Reviews </li>
14. </ul>
16. <div class="main" id="Main0" >
18. <ul class="block" ><li> News list </li></ul>
20. <ul><li> Comments List </li></ul>
22. <ul><li> Technology List </li></ul>
24. <ul><li> Review List </li></ul>
26. </div>
28. </div>

Second form: This structure is more complex, outside with a relative layer (. menu1box), set overflow hiding, sets the tab (#menu1) to absolute positioning, set the layer pointer to 1 (z-index:1;), so that the height of the main chunk (. main1box) 1px can be obscured. 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.

CSS Code

2. <div id="TABS1" >
4. <div class="Menu1box" >
6. <ul id="menu1" >
8. <li class="hover" onmouseover="Settab (1,0)" ><a href="#" > News </a></li>
10. <li onmouseover="Settab" ><a href="#" > Comments </a></li>
12. <li onmouseover="Settab" ><a href="#" > Technology </a></li>
14. <li onmouseover="Settab (1,3)" ><a href="#" > Reviews </a></li>
16. </ul>
18. </div>
20. <div class="Main1box" >
22. <div class="main" id="main1" >
24. <ul class="block" ><li> News list </li></ul>
26. <ul><li> Comments List </li></ul>
28. <ul><li> Technology List </li></ul>
30. <ul><li> Review List </li></ul>
32. </div>
34. </div>
36. </div>

The first to second type of JS code:

JS Code

2. function Settab (m,n) {
4. var Tli=document.getelementbyid ("menu" +m). getElementsByTagName ("Li"); / * Get the Li object for the tab * /
6. var Mli=document.getelementbyid ("main" +m). getElementsByTagName ("ul"); / * Get the main display area object * /
8. for (i=0;i<tli.length;i++) {
10. 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 * /
12. Mli[i].style.display=i==n? " block":"None"; / * Determine which object is displayed in the main area * /
14. }
16. }

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.

CSS Code

2. <div id="TABS2" >
4. <div class="Menu2box" >
6. <div id="tip2" ></div>
8. <ul id="MENU2" >
10. <li class="hover" onmouseover="Nowtab (2,0)" ><a href="#" > News </a></li>
12. <li onmouseover="Nowtab (2,1)" ><a href="#" > Comments </a></li>
14. <li onmouseover="Nowtab (2,2)" ><a href="#" > Technology </a></li>
16. <li onmouseover="nowtab (2,3)" ><a href="#" > Reviews </a></li>
18. </ul>
20. </div>
22. <div class="main" id="main2" >
24. News content
26. </div>

Three simple, classic and efficient div+css-made tab navigation analysis