이 기사의 예에서는 jQuery가 자동 탭 레이블 전환을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. jQuery로 구현한 탭 라벨 자동 전환 효과 <br> * {<br> 여백:0;<br> 패딩:0;<br> }<br> DL {<br> 여백:10px 자동;<br> 너비:500px;<br> 줄 높이:24px;<br> 테두리 왼쪽:1px 단색 #dcdcdc;<br> }<br> dt.활성 {<br> 테두리 하단:1px 솔리드 #fff;<br> 위치:상대;<br> }<br> dt {<br> 패딩:0 10px;<br> 부동:왼쪽;<br> 테두리:1px 솔리드 #dcdcdc;<br> 테두리 왼쪽:0;<br> 커서:포인터;<br> 여백-하단:-1px;<br> }<br> dd {<br> 지우기:둘 다;<br> 너비:100%;<br> 테두리 왼쪽:0;<br> 테두리:1px 솔리드 #dcdcdc;<br> 테두리 왼쪽:0;<br> 디스플레이:없음;<br> }<br> </스타일><br> </머리><br> <br> <dl><br> <dt>nav1</dt><br> <dt>nav2</dt><br> <dt>nav3</dt><br> <dd>1111111111111111111111</dd><br> <dd> 2222222222222222222222</dd><br> <dd> 33333333333333333333333</dd><br> <br> <script type="text/javascript" src="/html/txdm_2/images/20101004/jquery-1.2.6.min.js"></script><br> <script type="text/javascript"><br> $(문서).ready(함수(){<br> $('dt:first').addClass('활성');<br> $('dd:first').css('display','block');<br> 자동롤();<br> HookThumb();<br> });<br> var i=-1; //i번째 탭이 시작됩니다<br> var 오프셋 = 2500; //회전 시간<br> var 타이머 = null;<br> 함수 autoroll(){<br> n = $('dt').length-1;<br> 나 ;<br> if(i > n){<br> 나는 = 0;<br> }<br> 슬라이드(i);<br> 타이머 = window.setTimeout(autoroll, offset);<br> }<br> 기능 슬라이드(i){<br> $('dt').eq(i).addClass('active').siblings().removeClass('active');<br> $('dd').eq(i).css('display','block').siblings('dd').css('display','none');<br> }<br> 함수 HookThumb(){ <br> $('dt').hover(<br> 함수 () {<br> If (타이머) {<br> > " i = $(this).prevAll().length;<br> 슬라이드(i) <br> }<br> },<br> 함수 () {<br> <br> 타이머 = window.setTimeout(autoroll, offset) <br> This.blur(); false를 반환합니다.<br> }<br> ); <br> }<br> <br> </본문><br> </div>
