Das Beispiel in diesem Artikel beschreibt, wie jQuery den automatischen Tab-Label-Wechsel implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt: Code kopieren Der Code lautet wie folgt: Automatischer Wechseleffekt der Tab-Beschriftung, implementiert durch jQuery <br> * {<br> Rand:0;<br> Polsterung:0;<br> }<br> dl {<br> margin:10px auto;<br> Breite:500px;<br> Zeilenhöhe:24px;<br> border-left:1px solid #dcdcdc;<br> }<br> dt.active {<br> border-bottom:1px solid #fff;<br> position:relativ;<br> }<br> dt {<br> padding:0 10px;<br> float:left;<br> border:1px solid #dcdcdc;<br> border-left:0;<br> Cursor:Zeiger;<br> margin-bottom:-1px;<br> }<br> dd {<br> klar:beide;<br> Breite: 100 %;<br> border-left:0;<br> border:1px solid #dcdcdc;<br> border-left:0;<br> display:none;<br> }<br> nav1 nav2 nav3 1111111111111111111111 222222222222222222222 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; //Der i-te Tab beginnt<br> var offset = 2500; //Rotationszeit<br> var timer = null;<br> Funktion autoroll(){<br> n = $('dt').length-1;<br> ich ;<br> if(i > n){<br> i = 0;<br> }<br> slide(i);<br> Timer = window.setTimeout(autoroll, offset);<br> }<br> Funktion 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> Funktion HookThumb(){ <br> $('dt').hover(<br> Funktion () {<br> Wenn (Timer) {<br> i = $(this).prevAll().length;<br> slide(i); <br> }<br> },<br> Funktion () {<br> <br> timer = window.setTimeout(autoroll, offset); This.blur(); return false;<br> }<br> ); <br> }<br>
