JS는 탭 페이지 효과(CSS 사용)_javascript 기술을 구현합니다.-JS 튜토리얼-php.cn

JS는 탭 페이지 효과(CSS 사용)_javascript 기술을 구현합니다.

WBOY

풀어 주다： 2016-05-16 17:38:21

원래의

1131명이 탐색했습니다.

얻은 효과:
JS는 탭 페이지 효과(CSS 사용)_javascript 기술을 구현합니다.

위 그림과 같이 생성된 탭 페이지입니다. 우리가 얻고자 하는 효과는 마우스가 특정 탭으로 이동하면 다음 콘텐츠 해당 콘텐츠가 영역에 표시되며, 해당 라벨의 색상을 변경해야 합니다. 그림과 같이 현재 마우스 위치는 "라벨 1"에 있으며, 콘텐츠 영역에 표시되는 콘텐츠는 "입니다. I am content 1", 그리고 "label 1"은 "Tag 2", "Tag 3"보다 색상이 어둡습니다. 마찬가지로 "Tag 2", "Tag 3"으로 마우스를 이동하면 "I am content 2"가 나타납니다. "I am content 3"이 표시됩니다. 이 효과는 CSS와 JS의 협력을 통해 달성됩니다. 특정 코드를 살펴보겠습니다.

HTML 코드 먼저 살펴보기:

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

탭 페이지 효과

< ;/head>

탭 1

태그 3

오전 콘텐츠 1< ;/div>

나는 콘텐츠 2입니다

;나는 콘텐츠 3

JS 코드 구현 아이디어는 매우 간단합니다. 각 라벨 항목에 마우스를 올리면 moveover 함수 본문의 코드가 실행됩니다. 함수 본문 코드는 먼저 현재 노드를 획득하고 원래 표시된 내용을 숨긴 다음 들어오는 노드 인덱스를 기반으로 해당 레이블에 해당하는 내용을 표시합니다. 코드에서 HTML의 노드 스타일을 변경하는 것 외에도 setTimeout 함수도 사용되는 것을 볼 수 있습니다. 이 함수의 기능은 함수의 실행 시간을 지연시키는 것입니다. 다음 코드의 지연 시간은 300밀리초입니다. 즉, 마우스가 라벨로 이동하면 코드가 즉시 실행되지 않고 300밀리초 이내에 마우스가 라벨 영역 밖으로 이동하면 더 이상 코드가 실행되지 않습니다.

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

$(document).ready(function( ){

var timeoutid; 
$("#tabfirst li").each(function(index){ 

//li의 래핑된 각 JQuery 객체는 함수의 코드를 실행합니다
/ /index는 현재 이 함수 코드를 실행 중인 li에 해당하는 모든 li로 구성된 배열의 인덱스 값입니다. 
//index의 값으로 현재 레이블에 해당하는 콘텐츠 영역을 찾을 수 있습니다. 
$ (this).mouseover(function(){ 
var liNode = $(this); 
timeoutid = setTimeout(function(){ 
//원래 표시된 콘텐츠 숨기기
$("div. contentin" ).removeClass("contentin"); 
//원래 tabin 속성이 있던 태그에서 tabin 속성을 제거합니다 
$("#tabfirst li.tabin").removeClass("tabin"); 
// 현재 태그에 해당하는 콘텐츠 영역 표시 
$("div.contentfirst").eq(index).addClass("contentin") 
//$("div.contentfirst: eq(" index " )").addClass("contentin"); 
//현재 레이블에 tabin 속성 추가 
liNode.addClass("tabin"); 

},300 ); 

}).mouseout(function(){ 

clearTimeout(timeoutid); 
}) 
}); 🎜> 
이를 제외하고 동일한 원리를 사용하여 각 레이블에 대한 클릭 기능을 등록할 수 있으며, 각 레이블을 클릭하면 다른 페이지 또는 페이지의 일부가 원본 콘텐츠 영역에 로드될 수 있습니다. . 관심이 있으시면 여기를 클릭하여 소스 코드를 다운로드하실 수 있습니다. 소스 코드에는 기사에 언급된 두 가지 다른 기능으로 구현된 다양한 기능이 포함되어 있습니다.