Three simple Tab navigation (Web Tab) analysis _ experience exchange

Three simple Tab navigation (Web Tab) are recommended. Applying tabs in a Web page makes the web page more compact. Combining AJAX technology, the page can display 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 images, good compatibility, and easy to use.
The first form: it is implemented by changing the display style. This is very common and will not be said much.

  
 
 
    
  
  
News
    
  
  
Comment
    
  
  
Technology
    
  
  
Comments
  
 
 
  
    
 
 

  
  
News list
 
 
    
 
 

  
  
Comment list
 
 
    
 
 

  
  
Technology list
 
 
    
 
 

  
  
Comment list
 
 
  
  

The second form: this structure is more complex, and a relative layer (. menu1box), set overflow to hide, set the tab (# menu1) to absolute positioning, and set the layer pointer to 1 (z-index: 1;) to cover the main block (. main1box) 1px height. Set the border of the main block to a black edge of 1px and the margin (margin-top) to-1px to extend the upper border to the tab. When the background of a tab item (li) is changed to white, the upper border of some primary blocks can be covered. In this way, the effect is achieved.

  
    
 
 
     
  
  
News
    
  
  
Comment
     
  
  
Technology
     
  
  
Comments
    
 
 
  
  
    
     
 
 

  
  
News list
 
 
     
 
 

  
  
Comment list
 
 
     
 
 

  
  
Technology list
 
 
     
 
 

  
  
Comment list
 
 
    
  
  

JS Code in the first and second forms:

Function setTab (m, n) {var tli = document. getElementById ("menu" + m ). getElementsByTagName ("li");/* obtain the LI object of the tab */var mli = document. getElementById ("main" + m ). getElementsByTagName ("ul");/* obtain the object of the primary display area */for (I = 0; I
 
  
The third form: this is also an uncommon way to add a relative layer (. menu2box), uses a background layer (# tip2) to locate, and changes the left distance (left) of the layer to achieve the effect.
  
  
    
    
   
  
     
    
   
News
    
    
   
Comment
     
    
   
Technology
     
    
   
Comments
    
   
  
  
    
News content
  

  
Demo:
  
   
    Simple Tab Script
   Script    
    
  
   
  
   
    
   
News
   
    
   
Comment
   
    
   
Technology
   
    
   
Comments
  
   
  
  
   
   
  

    
   
News list
   
  
   
   
  

    
   
Comment list
   
  
   
   
  

    
   
Technology list
   
  
   
   
  

    
   
Comment list
   
  
  
 
 
    
  
   
   
  
    
    
   
News
    
    
   
Comment
    
    
   
Technology
    
    
   
Comments
   
   
  
  
  
   
    
   
  

    
   
News list
   
  
    
   
  

    
   
Comment list
   
  
    
   
  

    
   
Technology list
   
  
    
   
  

    
   
Comment list
   
  
   
  
 
   
    
  
   
   
   
  
    
    
   
News
    
    
   
Comment
    
    
   
Technology
    
    
   
Comments
   
   
  
  
   
News content
 
  
  

  
The above are three simple Tab navigation (Web Tab) analysis _ experience exchange content. For more information, see PHP Chinese Web (www.php1.cn )!