推荐三种简洁的Tab导航（网页选项卡）简析

在网页中应用选项卡可以使网页显得更紧凑，结合ajax技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现（不涉及滑动门和ajax），附有实例，无图片，兼容性较好，方便大家直接使用。
第一种形式: 通过更换显示样式实现，这种很常见，就不多说了。

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

第二种形式: 这种结构比较复杂一些，外面加一个相对层(.menu1box)，设置溢出隐藏，将选项卡(#menu1)设为绝对定位，设置层指针为1(z-index:1;)，以便可以遮住下主区块(.main1box)1px的高度。设置主区块的边框为1px的黑边，上空白(margin-top)为-1px，使上边框伸到选项卡下。当改变选项卡某项(li)的背景为白色时便可遮住一部分主区块的上边框。这样效果就实现了。

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

第一、二种形式的JS代码:

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第三种形式: 这也是一种不常用的方式，加一个相对层(.menu2box)，利用一个背景层(#tip2)定位，通过改变层的左距离(left)实现效果。 

							
								
								
									Bolt.new
									Bolt.new是一个免费的AI全栈开发工具
								
								下载 
							
						
  
  
    
    
   新闻 
   评论  
   技术  
   点评  
    
  
    
新闻内容  
  
效果演示： 
 
 
 
 
简洁Tab 
 
 
 
 

 

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

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



 

 

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

 

以上就是推荐三种简洁的Tab导航（网页选项卡）简析_经验交流的内容，更多相关内容请关注PHP中文网（www.php.cn）！