本文实例讲述了jquery实现通用的内容渐显标签选项卡效果。分享给大家供大家参考。具体如下：

这是一款网页常用的拉环选项卡功能，无鼠标操作的时候它可以自动轮换，美化一般，看上去有些粗糙，有兴趣使用的朋友可以进行细致修饰，相信会更漂亮的。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-show-info-tab-nav-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title通用TAB-有自动轮换功能/title脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/脚本样式type='text/css '！-* { padd :0；margin:0list列表式：无；} .cur { color: # 000背景色： # FFF；} .红色{ font-size : 20px字体粗细：更粗；} # LX ftab-click {-moz-border-radius :5 px；背景色： # 069;宽度宽度：600像素飞越：隐藏；padd :2 pxmargin-top :20 px；左边距左：auto右边距：汽车；} # lxfTab-点击。标题{ color : # FFF；} # lxfTab-点击。标题Li { float : leftadding :1 xcursor : pointer指针；宽度：40 px余量：8px 0 8px 8pxborder:1px固体# FFF；-moz-边界-半径：5 px文本对齐：居中；} # lxfTab-点击。内容{ width :600 pxfloat : left } # LX ftab-点击。内容李；背景色： # FFF；padd :6 px-moz-border-radius :5 px；宽度： 572像素；边距-top : 0px；右边距： 8px边距-底部： 8px左边距left : 8px }-/style script $(function(){ $(' # lxfTab-click .标题li:first ').添加CLaSS(' cur ')；$('#lxfTab-click .content li:not(:first)').hide()；$('#lxfTab-click .标题李' .单击(function(){ var index=$(' # lxfTab-click .标题李' .索引($(this))；$('#lxfTab-click .标题李' .移除CLaSS(' cur ')；$(这个)。添加CLaSS(' cur ')；$('#lxfTab-click .内容李' .隐藏()。eq(指数)。fadeIn(' fast ')；$('.现在')。文本（索引1);});/* 自动轮换*/var I=-1；//设置起始位置定义变量速度=3000;//设置轮换速度var n=$('#lxfTab-click .标题李' .长度-1;函数autoroll(){ if(I=n){ I=-1；}我；$('#lxfTab-click .标题李' .removeClass('cur ').方程式(I ).添加CLaSS(' cur ')；$('#lxfTab-click .内容李' .隐藏()。方程式(I ).fadeIn(' fast ')；定时器=setTimeout(自动滚动，速度);};/* 鼠标悬停即停止自动轮换*/函数stop roll(){ $(' # LX ftab-click Li ').悬停(函数(){ clearTimeout(计时器));i=$(这个)。普雷瓦尔()。长度；}，function(){ timer=setTimeout(autoroll，speed)；});};autoroll()；//执行自动轮换函数停止滚动()；//启动悬停功能});/script/head body div id=' LxFTab-click ' ul class=' title ' Li 1/Li Li 2/Li Li 3/Li Li 4/Li Li 5/Li/ul div id=' LRbutton ' ul Li/Li/Li/ul/div ul class=' content ' Li 1/李丽丽2/Li Li 3/李丽丽4/李丽丽5/Li/ul/div/body/html希望本文所述对大家的jquery程序设计有所帮助。