本文说明了rTabs的用法，RtaBs是一个jQuery web选项卡插件。分享给大家参考。具体如下：

介绍了jQuery web TAB插件rTabs的用法，并演示了四种TAB样式。第一种是默认样式：自动操作，无动画效果，Hover事件；第二种：自动运行、向上滚动、支持悬停事件的TAB菜单；第三种：自动运行、淡入淡出、支持Hover事件的标签；第四种：自动运行，向左滚动，点击事件的网页标签，选择一个你喜欢的放在你的网站上。

我们先来看看跑步效果的截图：

在线演示地址如下：

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

具体代码如下：

！DOCTYPE html html meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title jquery-RTAbs选项卡插件/title head脚本id=' jquery _ 172 ' type=' text/JavaScript ' class=' library ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript '(函数($){ $)。fn。rtabas=函数(选项){//默认值var defaultVal={ btnClass: ' .j-tab-nav '，/*按钮的父级类*/conClass: ' .j-tab-con '，/*内容的父级类*/bind: "悬停",/*事件参数单击，悬停*/animate : ' 0 '，/*动画方向向左，向上，向右，0为无动画*/speed:300，/*动画运动速度*/delay:200，/*选项卡延迟速度*/auto:true，/*是否开启自动运行true，false*/autoSpeed:3000 /*自动运行速度*/};//全局变量var obj=$ .extend(defaultVal，options)，evt=obj.bind，btn=$(this).find(obj.btnClass)，con=$(this).find(obj.conClass)，anim=obj.animation，conWidth=con.width()，conHeight=con.height()，len=con.children().长度，sw=len * conWidth，sh=len * conHeight，i=0，len，t，timer返回this.each(function(){ //判断动画方向函数Judiceanim(){ var w=I * con width，h=i * conHeightbtn.children().removeClass(“”当前')。方程式(I ).添加CLaSS(' current ')；switch(anim){ case ' 0 ' : con . children().隐藏()。方程式(I ).show()；打破；case ' left ' : con . CSS({ position : ' absolute，width:sw}).儿童()。css({float:'left '，display:'block'}).end().停止()。动画({left:-w}，obj。速度)；打破；case ' up ' : con . CSS({ position : ' absolute '，height:sh}).儿童()。css({display:'block'}).end().停止()。动画({top:-h}，obj。速度)；打破；case 'fadein': con.children().隐藏()。方程式(I ).fadeIn()；打破；} } //判断事件类型if(evt=='hover'){ btn.children().悬停(function(){ var j=$(this)).index()；函数s(){ I=j；anim法官()；} timer=setTimeout(s，obj)。延迟)；}，function(){ clearTimeout(计时器);}) }else{ btn.children().bind(evt，function(){ i=$(this)).index()；anim法官()；}) } //自动运行函数startRun(){ t=setInterval(函数(){一；if(I=len){ switch(anim){ case ' left ' : con . stop().CSS({左侧： con宽度})；打破；案例“向上”: con . stop().CSS({ top : con height })；} I=0；} Judiceanim()；}，obj.autoSpeed) } //如果自动运行开启，调用自动运行函数if(obj.auto){ $(this).hover(function(){ clearInterval(t))；}，function(){ startRun()；})startRun()；} })})))(jQuery)；/script脚本类型=' text/JavaScript ' $(function(){ $(' # tab ').rtabas()；$('#tab2 ').rtabas({ bind : ' click '，animation : ' left ' })；$('#tab3 ').rtabas({ bind : ' hover '，animation : ' up ' })；$('#tab4 ').rtabas({ bind :“悬停”，animation :“淡入”)}；})/脚本样式正文{背景： # fff} H2 { width : 400 pxmargin : 0 auto 10px auto font-size : 18px；字体系列： '微软雅黑；color: # 333}。选项卡{位置：相对；宽度： 400像素；高度： 230像素飞越：隐藏；margin : 0 auto 20px auto font-family : Arial；}.tab-nav { height : 30px；飞越：隐藏；背景： # f5f5f5}。选项卡-导航a {显示屏： }块；向左浮动：宽度： 80px高度： 30px线高： 30px文本对齐：中心；文本装饰：无；color: # 999}。当前{背景： # 80b 600color: # fff}。tab-con {位置：相对；宽度： 400像素；高度： 200像素；飞越：隐藏；背景技术# 80b600}。tab-con-item { display : none；宽度： 400像素；高度： 180像素；线高： 180像素；文本对齐：中心；color: # fff}/style/head dyh 1如果初次打开网页运行有错误看不到效果，请按F5或刷新网页重新载入即可。

/h1/brh2默认样式：自动运行、无动画效果、悬停事件/H2 div class=' tab ' id=' tab ' div class=' tab-nav j-tab-nav ' a href=' JavaScript : void(0)；'class=' current ' Tab 1/a a href=' JavaScript : void(0)；tab 2/a a href=' JavaScript : void(0)；tab 3/a a href=' JavaScript : void(0)；tab 4/a a href=' JavaScript : void(0)；tab 5/a/div class=' tab-con ' div class=' j-tab-con ' div class=' tab-con-item ' style='显示：块；111111/div class=' tab-con-item ' 222222/div class=' tab-con-item ' 333333/div class=' tab-con-item ' 44444/div class=' tab-con-item ' 55555/div/div/div H2自动运行、向左滚动、点击事件/H2 div class=' tab ' id=' tab 2 ' div class=' tab-nav j-tab-nav ' a href=' JavaScript : void(0)；class=' current ' Tab 1/a a href=' JavaScript : void(0)；'tab 2/a a href=' JavaScript : void(0)；'tab 3/a a href=' JavaScript : void(0)；'tab 4/a a href=' JavaScript : void(0)；'tab 5/a/div class=' tab-con ' div class=' j-tab-con ' div class=' tab-con-item ' style='显示：块；111111/div class=' tab-con-item ' 22222/div class=' tab-con-item ' 333333/div class=' tab-con-item ' 44444/div class=' tab-con-item ' 55555/div/div/div H2自动运行、向上滚动、悬停事件/H2 div class=' tab ' id=' tab 3 ' div class=' tab-nav j-tab-nav ' a href=' JavaScript : void(0)；class=' current ' Tab 1/a a href=' JavaScript : void(0)；tab 2/a a href=' JavaScript : void(0)；tab 3/a a href=' JavaScript : void(0)；tab 4/a a href=' JavaScript : void(0)；tab 5/a/div class=' tab-con ' div class=' j-tab-con ' div class=' tab-con-item ' style='显示：块；111111/div class=' tab-con-item ' 222222/div class=' tab-con-item ' 333333/div class=' tab-con-item ' 44444/div class=' tab-con-item ' 55555/div/div/div H2自动运行、渐入、悬停事件/H2 div class=' tab ' id=' tab 4 ' div class=' tab-nav j-tab-nav ' a href=' JavaScript : void(0)；class=' current ' Tab 1/a a href=' JavaScript : void(0)；tab 2/a a href=' JavaScript : void(0)；tab 3/a a href=' JavaScript : void(0)；tab 4/a a href=' JavaScript : void(0)；tab 5/a/div class=' tab-con ' div class=' j-tab-con ' div class=' tab-con-item ' style='显示：块；111111/div class=' tab-con-item ' 222222/div class=' tab-con-item ' 333333/div class=' tab-con-item ' 44444/div class=' tab-con-item ' 555555/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。