jquery 탭 제작 page_jquery

여기서 특별히 주의해야 할 점은 레이블의 마우스 오버 이벤트에 대한 지연을 설정하여 사용자가 악의적으로 마우스를 움직여 많은 요청을 발생시키고 서버가 충돌하는 것을 방지하는 것입니다. 함수는 주로 다운로드된 이벤트에 사용됩니다.

1 $().each(function(){}) 이는 모든 태그를 탐색하는 매우 중요한 방법입니다.

2 마우스 오버 이벤트,

및 주요 CSS 스타일 표시되는 스타일을 작성하고 제어합니다.

코드 복사 코드는 다음과 같습니다.

< link rel="stylesheet" type="text/css" href="css/tab.css">

>

• Tag1
  
• Tag2
< ;/div> 🎜>



코드 복사


코드는 다음과 같습니다.


ul ,li { margin:0px;

padding: 0px;
list-style:none;
}

li { float:left #66CC00; margin-right:2px; //padding:5px; border:1px height:20px>; 흰색

}

.listli { background-color: #663333;
border:1px solid #663333;

}
div {clear:left; >너비:300px
높이:100px;
테두리 상단:0px;
디스플레이:없음
🎜>
.divarea { display:block; }


다음 단계는 슬라이딩을 제어하는 ​​js를 작성하는 것입니다.




코드를 복사합니다.


코드는 다음과 같습니다.


// 전역 변수 정의
var timeout
$(document).ready(function(){
//모든 li 태그 찾기
$("li").each(function(index){

$(this).mouseover(function(){
//미닫이 문은 다음과 같습니다. 사용자가 마우스를 과도하게 움직여 서버가 충돌하는 것을 방지하기 위해 지연 시간을 설정하십시오. 이는 매우 중요합니다
timeout =setTimeout (function(){

$("div.divarea").removeClass("divarea "); $("li.listli").removeClass("listli"); // $( "div").eq(index).addClass("divarea"); //다른 방법 작성하는 방법은 다음과 같습니다:$(div:eq(index)).addClass("divarea"); $("div: eq(" index ")").addClass("divarea")$ ("li").eq(index).addClass("listli"); }, 320);

$(this).mouseout(function(){

clearTimeout(timeout) ;
});
})