简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary

Home  >  Article  >  Web Front-end  >  Brief analysis of three recommended simple Tab navigations (web page tabs)_Experience exchange

Brief analysis of three recommended simple Tab navigations (web page tabs)_Experience exchange

PHP中文网
PHP中文网Original
2016-05-16 12:07:452035browse

applying tabs to a web page can make the web page appear more compact, and combining it with ajax technology can allow the page to 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 pictures, good compatibility, and convenient for everyone to use directly.
the first form: achieved by changing the display style. this is very common, so i won’t go into details. 

  
  
  新闻  
  评论  
  技术  
  点评  
  
  
  
  • 新闻列表
    •   
  
    • 评论列表
      
  
    • 技术列表
      
  
    • 点评列表
      
      



    the second form: this structure is more complicated, with a relative layer (.menu1box) added outside. set overflow hiding, set the tab (#menu1) to absolute positioning, and set the layer pointer to 1 (z-index:1;) so that the height of the lower main block (.main1box) can be covered by 1px. set the main block's border to a 1px black border, and the top margin (margin-top) to -1px, so that the top border extends under the tab. when you change the background of a tab item (li) to white, you can cover part of the upper border of the main area. this effect is achieved. 

      
  
    
   新闻 
   评论  
   技术  
   点评  
    
                  
  • 新闻列表
    •       
    • 评论列表
          
    • 技术列表
          
    • 点评列表
         
         


    the first and second forms of js code: 

    function settab(m,n){  
var tli=document.getelementbyid("menu"+m).getelementsbytagname("li"); /*获取选项卡的li对象*/  
var mli=document.getelementbyid("main"+m).getelementsbytagname("ul"); /*获取主显示区域对象*/  
for(i=0;i
    the third form: this is also an uncommon method , add a relative layer (.menu2box), use a background layer (#tip2) to position, and achieve the effect by changing the left distance (left) of the layer. 
      
  
    
    
   新闻 
   评论  
   技术  
   点评  
    
  
    
新闻内容  
  

    effect demonstration: 
     
 
 
 
简洁Tab 
 
 
 
 


     
 

 

 
 
 
  
  新闻 
  评论 
  技术 
  点评 
  
  
  
  • 新闻列表
    •  
  
    • 评论列表
     
  
    • 技术列表
     
  
    • 点评列表
     
  
 

 
 
  
   
   新闻 
   评论 
   技术 
   点评 
   
  
  
   
   
  • 新闻列表
    •  
   
    • 评论列表
     
   
    • 技术列表
     
   
    • 点评列表
     
   
  
 



 

 

 
 
  
   
   
   新闻 
   评论 
   技术 
   点评 
   
  
   
新闻内容 
  
 

 


    the above is a brief analysis and experience exchange recommended for three simple tab navigation (web page tabs). for more related content, please pay attention to the php chinese website ( m.sbmmt.com)! 
    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：I studied the height adaptive problem of div css_Experience exchangeNext article：I studied the height adaptive problem of div css_Experience exchange
    Related articles
    See more