마우스가 탭으로 이동하면 사용자가 실수로 마우스를 조작하는 것을 방지하기 위해 해당 항목으로 전환하기 전에 일정 지연이 발생합니다. 렌더링: 소스코드: 코드복사 코드는 다음과 같습니다: <제목>탭 스위치 <br>본문{ 배경:#fff;} <br>*{ 여백:0 ; 패딩:0;} <br>.box{ 여백:20px } <br>.container{배경:#FFF; 너비:500px; 1px;} <br>.sub-con{높이:300px; 너비:500px;경계:1px 배경:#FFF; 디스플레이:없음;} <br>.cur-sub-con{ 디스플레이:블록; } <br>.sub-con a{ line-height:40px} <br>.sub-con p{ text-align:center} <br>.nav{ width:370px height:28px; ;} <br>.nav ul{width:370px; height:28px;} <br>.nav ul li{ list-style:none; 디스플레이:inline-block;width:60px; 28px; 텍스트 -align:center;margin-left:-9px;*float:left;*margin-left:-1px;} <br>.nav ul li a{ background:#fff;border:1px solid #3CF; 텍스트 장식:없음; 색상:#000; 높이:28px;디스플레이:블록;} <br>.nav ul li a:hover{ background:#CCEDFB} <br>.nav ul li a.cur{ z-index :9999; 테두리 하단:1px 단색 #FFF; 색상:#F00;} <br><body> <br><div class="box"< ;div class ="nav"> <br><ul> <br><li><a href="javascript:void(0)" class="cur">탭 항목 1</a> </ li> <br><li><a href="javascript:void(0)">탭 항목 2></li> <br><li><li><a href="javascript:void(0)">탭 항목 4</ a></li> <br></ul> <br><div class="container"> sub-con "> <a href="#" title="컨테이너 1입니다.">컨테이너 1입니다</a><p><img src="http://images.cnblogs. com/cnblogs_com /cos2004/286060/o_img001.jpg" /></p></div> <br><div class="sub-con"> <a href="#" title= "컨테이너 2입니다.">컨테이너 2입니다</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g02.jpg" />< ;/p> ;</div> <br><div class="sub-con"> <a href="#" title="컨테이너 3입니다."> <p> ;<img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g03.jpg" /></p></div> <br><div 클래스 ="sub -con"> <a href="#" title="컨테이너 4입니다.">컨테이너 4입니다</a><p><img src="http://images. cnblogs.com /cnblogs_com/cos2004/286060/o_img_g04.jpg" /></p></div> <br></div> <br></div> <br></body> ; <BR><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <br> <script type="text/javascript"> <br>$(document).ready(function(){ <br>var IntervalID; <br>var curLi; <br>$(".nav li a") .mouseover(function(){ <br>curLi=$(this); <br>intervalID=setInterval(onMouseOver,250);//마우스가 안으로 들어가면 전환되기 전에 일정 지연이 발생합니다. 사용자의 실수를 방지하기 위한 항목<br>}); <br>function onMouseOver(){ <br>$(".cur-sub-con").removeClass("cur-sub-con"); >$(".sub -con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con") <br>$(".cur") .removeClass("cur" ); <br>curLi.addClass("cur"); <br>} <br>$(".nav li a").mouseout(function(){ <br>clearInterval(intervalID) ; <br>}) ; <br><br>$(".nav li a").click(function(){//마우스 클릭으로도 전환 가능 <br>clearInterval(intervalID); <br>$(" .cur-sub-con ").removeClass("cur-sub-con"); <br>$(".sub-con").eq($(".nav li a").index(curLi)) .addClass("cur- sub-con"); <br>$(".cur").removeClass("cur") <br>curLi.addClass("cur") <br>}; ><br>}) ; <br></script> <br></html></li> </div>
