jQuery实现Tab菜单滚动切换的方法

本文实例讲述了jQuery实现Tab菜单滚动切换的方法。分享给大家供大家参考。具体如下：

这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧.

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-tab-menu-cha-style-codes/

具体代码如下：

 body {
  font-family:arial;
  font-size:12px; 
 }
 a {
  color:#333;
  text-decoration:none;
  display:block;
 }
 a:hover {
  color:#888;
  text-decoration:none;
 }
 #moving_tab {
  overflow:hidden;
  width:300px;
  position:relative
  border:1px solid #ccc; 
  margin:0 auto;
 }
  #moving_tab .tabs {
   position:relative; 
   height:30px;
   padding-top:5px;
   cursor:default;
  }
  #moving_tab .tabs .item {
   position:relative;
   z-index:10;
   float:left;
   display:block;
   width:150px;
   text-align:center;
   font-size:14px;
   font-weight:700; 
  }
  #moving_tab .tabs .lava {
   position:absolute;
   top:0; left:0;
   z-index:0;  
   width:150px;
   height:30px;
   background:#abe3eb;
  }
  #moving_tab .content {
   position:relative;
   overflow:hidden;
   background:#abe3eb;
   border-top:1px solid #d9fafa;
  }
  #moving_tab .panel {
   position:relative;
   width:600px;
  }
  #moving_tab .panel ul {
   float:left;
   width:300px;
   padding:0;
   margin:0;
   list-style:none;
  }
   #moving_tab .panel ul li {
    padding:5px 0 5px 10px; 
    border-bottom:1px dotted #fff;
   }
 
 



 
  
  Popular Posts
  Recent Posts
 

 
   

    
Panel 01 Item 01
    
Panel 01 Item 02
    
Panel 01 Item 03
    
Panel 01 Item 04
    
Panel 01 Item 05
   
   

    
Panel 02 Item 01
    
Panel 02 Item 02
    
Panel 02 Item 03
    
Panel 02 Item 04
    
Panel 02 Item 05
   
   
      
  
  

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