本文實例講述了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 222222222222222222222 33333333333333333333333 <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程式設計有所幫助。
