本文实例讲述了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程序设计有所帮助。
