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

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
        

         Copy after login
        
       

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:

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