jQuery网页选项卡插件rTabs用法实例分析

本文实例讲述了jQuery网页选项卡插件rTabs用法。分享给大家供大家参考。具体如下：

这里介绍jQuery网页选项卡插件rTabs用法，一共演示了4种TAB选项卡样式，第一种：默认样式：自动运行、无动画效果、Hover事件；第二种：自动运行、向上滚动、支持Hover事件的TAB选项卡菜单；第三种：自动运行、渐入淡出、支持Hover事件的选项卡；第四种：自动运行、向左滚动、点击事件的网页选项卡，选一个你喜欢的放在你的网站吧。

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-rTabs-web-tab-cha-codes/

具体代码如下：

body{background:#fff;}h2{width: 400px;margin: 0 auto 10px auto;font-size: 18px;font-family: "微软雅黑";color: #333;}.tab{position: relative;width: 400px;height: 230px;overflow: hidden;margin: 0 auto 20px auto;font-family: Arial;}.tab-nav{height: 30px;overflow: hidden;background: #f5f5f5;}.tab-nav a{display: block;float: left;width: 80px;height: 30px;line-height: 30px;text-align: center;text-decoration: none;color: #999;}.tab-nav a.current{background: #80b600;color: #fff;}.tab-con{position: relative;width: 400px;height: 200px;overflow: hidden;background: #80b600;}.tab-con-item{display: none;width: 400px;height: 180px;line-height: 180px;text-align: center;color: #fff;}



如果初次打开网页运行有错误看不到效果，请按F5或刷新网页重新载入即可。

默认样式：自动运行、无动画效果、Hover事件

 
  Tab1
  Tab2
  Tab3
  Tab4
  Tab5
 
 
  
   111111
     222222
     333333
     444444
     555555
   
  
 
自动运行、向左滚动、点击事件

 
  Tab1
  Tab2
  Tab3
  Tab4
  Tab5
 


111111
222222
333333
444444
555555



自动运行、向上滚动、Hover事件
 
  
   Tab1
   Tab2
   Tab3
   Tab4
   Tab5
  
 
  
   111111
   222222
   333333
   444444
   555555
   
 

自动运行、渐入、Hover事件
  
   
    Tab1
    Tab2
    Tab3
    Tab4
    Tab5
   
   
    
    111111
    222222
    333333
    444444
    555555
   
  
 

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