jQuery+css实现的tab切换标签(兼容各浏览器)

本文实例讲述了jQuery+css实现的tab切换标签。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

 
 
 
 
  body { margin:0; padding:0; background:#DFEFFF; }
  #tabContainer { width:500px; height:300px; margin-left:200px; margin-top:50px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; }
  .tab_header_group { color:Green; z-index:10; background:#DDDDDD url('img/navbg1.jpg'); width:100%; padding:0; margin:0; border-bottom:1px solid gray; border-radius:4px 4px 0 0;}
  .tab_header { line-height:30px; font-size:14px; display:inline-block; cursor:pointer; margin-right:-3px; *display:inline; zoom:1; padding-left:10px; padding-right:10px; border-radius:4px 4px 0 0; }
  .tab_header a,a:hover { text-decoration:none; }
  .tab_header:hover { background:#F5F5F5; }
  .tab_header_group .active { margin-bottom:0px; background:gray; color:#fff; }
  .tab_body { margin-top:1px; display:none; }
  .tab_body_group .active { display:block; }
 



 

  
首页1
  
首页2
  
首页3
  
首页4
  
首页5
 
 
  
   tab1
  
  
   tab2
  
  
   tab3
  
  
   tab4
  
  
   tab5
  
 

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。