本文实例讲述了jQuery实现tab标签自动切换的方法。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: jQuery实现的tab标签自动切换效果 <br /> * {<br /> margin:0;<br /> padding:0;<br /> }<br /> dl {<br /> margin:10px auto;<br /> width:500px;<br /> line-height:24px;<br /> border-left:1px solid #dcdcdc;<br /> }<br /> dt.active {<br /> border-bottom:1px solid #fff;<br /> position:relative;<br /> }<br /> dt {<br /> padding:0 10px;<br /> float:left;<br /> border:1px solid #dcdcdc;<br /> border-left:0;<br /> cursor:pointer;<br /> margin-bottom:-1px;<br /> }<br /> dd {<br /> clear:both;<br /> width:100%;<br /> border-left:0;<br /> border:1px solid #dcdcdc;<br /> border-left:0;<br /> display:none;<br /> }<br /> nav1 nav2 nav3 1111111111111111111111 2222222222222222222222 3333333333333333333333 <br /> $(document).ready(function(){<br /> $('dt:first').addClass('active');<br /> $('dd:first').css('display','block');<br /> autoroll();<br /> hookThumb();<br /> });<br /> var i=-1; //第i 1个tab开始<br /> var offset = 2500; //轮换时间<br /> var timer = null;<br /> function autoroll(){<br /> n = $('dt').length-1;<br /> i ;<br /> if(i > n){<br /> i = 0;<br /> }<br /> slide(i);<br /> timer = window.setTimeout(autoroll, offset);<br /> }<br /> function slide(i){<br /> $('dt').eq(i).addClass('active').siblings().removeClass('active');<br /> $('dd').eq(i).css('display','block').siblings('dd').css('display','none');<br /> }<br /> function hookThumb(){ <br /> $('dt').hover(<br /> function () {<br /> if (timer) {<br /> clearTimeout(timer);<br /> i = $(this).prevAll().length;<br /> slide(i); <br /> }<br /> },<br /> function () {<br /> <br /> timer = window.setTimeout(autoroll, offset); <br /> this.blur(); <br /> return false;<br /> }<br /> ); <br /> }<br /> 希望本文所述对大家的javascript程序设计有所帮助。