탭 레이블 Switching_jquery의 jQuery 버전-JS 튜토리얼-php.cn

마우스가 탭으로 이동하면 사용자가 실수로 마우스를 조작하는 것을 방지하기 위해 해당 항목으로 전환하기 전에 일정 지연이 발생합니다.

렌더링: 소스코드:

코드복사 코드는 다음과 같습니다: 탭 스위치 본문{ 배경:#fff;} *{ 여백:0 ; 패딩:0;} .box{ 여백:20px } .container{배경:#FFF; 너비:500px; 1px;} .sub-con{높이:300px; 너비:500px;경계:1px 배경:#FFF; 디스플레이:없음;} .cur-sub-con{ 디스플레이:블록; } .sub-con a{ line-height:40px} .sub-con p{ text-align:center} .nav{ width:370px height:28px; ;} .nav ul{width:370px; height:28px;} .nav ul li{ list-style:none; 디스플레이:inline-block;width:60px; 28px; 텍스트 -align:center;margin-left:-9px;*float:left;*margin-left:-1px;} .nav ul li a{ background:#fff;border:1px solid #3CF; 텍스트 장식:없음; 색상:#000; 높이:28px;디스플레이:블록;} .nav ul li a:hover{ background:#CCEDFB} .nav ul li a.cur{ z-index :9999; 테두리 하단:1px 단색 #FFF; 색상:#F00;} 탭 항목 1 탭 항목 2> 탭 항목 4 sub-con "> 컨테이너 1입니다

컨테이너 2입니다 &lt ;/p&gt ;

컨테이너 4입니다

$(document).ready(function(){ var IntervalID; var curLi; $(".nav li a") .mouseover(function(){ curLi=$(this); intervalID=setInterval(onMouseOver,250);//마우스가 안으로 들어가면 전환되기 전에 일정 지연이 발생합니다. 사용자의 실수를 방지하기 위한 항목 }); function onMouseOver(){ $(".cur-sub-con").removeClass("cur-sub-con"); >$(".sub -con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con") $(".cur") .removeClass("cur" ); curLi.addClass("cur"); } $(".nav li a").mouseout(function(){ clearInterval(intervalID) ; }) ;

$(".nav li a").click(function(){//마우스 클릭으로도 전환 가능 clearInterval(intervalID); $(" .cur-sub-con ").removeClass("cur-sub-con"); $(".sub-con").eq($(".nav li a").index(curLi)) .addClass("cur- sub-con"); $(".cur").removeClass("cur") curLi.addClass("cur") }; > }) ;