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

Source: Internet
Author: User

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
  1. <div id="Tabs0" >
  2. <ul class="menu0" id="menu0" >
  3. <li onclick="Settab (0,0)" class="hover" > news </li>
  4. <li onclick="Settab (0,1)" > Comments </li>
  5. <li onclick="Settab (0,2)" > Technology </li>
  6. <li onclick="Settab (0,3)" > Reviews </li>
  7. </ul>
  8. <div class="main" id="Main0" >
  9. <ul class="block" ><li> News list </li></ul>
  10. <ul><li> Comments List </li></ul>
  11. <ul><li> Technology List </li></ul>
  12. <ul><li> Review List </li></ul>
  13. </div>
  14. </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
  1. <div id="TABS1" >
  2. <div class="Menu1box" >
  3. <ul id="menu1" >
  4. <li class="hover" onmouseover="Settab (1,0)" ><a href="#" > News </a></li>
  5. <li onmouseover="Settab" ><a href="#" > Comments </a></li>
  6. <li onmouseover="Settab" ><a href="#" > Technology </a></li>
  7. <li onmouseover="Settab (1,3)" ><a href="#" > Reviews </a></li>
  8. </ul>
  9. </div>
  10. <div class="Main1box" >
  11. <div class="main" id="main1" >
  12. <ul class="block" ><li> News list </li></ul>
  13. <ul><li> Comments List </li></ul>
  14. <ul><li> Technology List </li></ul>
  15. <ul><li> Review List </li></ul>
  16. </div>
  17. </div>
  18. </div>


The first to second type of JS code:

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


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
    1. <div id="TABS2" >
    2. <div class="Menu2box" >
    3. <div id="tip2" ></div>
    4. <ul id="MENU2" >
    5. <li class="hover" onmouseover="Nowtab (2,0)" ><a href="#" > News </a></li>
    6. <li onmouseover="Nowtab (2,1)" ><a href="#" > Comments </a></li>
    7. <li onmouseover="Nowtab (2,2)" ><a href="#" > Technology </a></li>
    8. <li onmouseover="nowtab (2,3)" ><a href="#" > Reviews </a></li>
    9. </ul>
    10. </div>
    11. <div class="main" id="main2" >
    12. News content
    13. </div>

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.