JQuery_jquery 기반 다중 태그 구현 코드

오늘 제가 공유하고 싶은 것은 JQuery를 기반으로 한 멀티탭 전환입니다. JQuery는 너무 많이 소개할 필요는 없습니다. 인터넷에서 많은 정보를 검색해 봤지만, 여기에는 몇 가지만 표현하겠습니다. 내 생각 중.

다음은 이 예에 사용된 HTML 페이지입니다.

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

< ;!-- 날짜: 2012-09-17 -->

< ;li class="showTab">탭 1>

태그 3

>

콘텐츠 1

콘텐츠 2

이제 페이지에는 태그 효과가 없으므로 페이지에 태그 효과를 표시하려면 한쪽에 CSS 파일을 추가하세요.




코드 복사

코드는 다음과 같습니다.

a{ display: block text-design: none color:white; ; } #contenTab ul{

목록 스타일: 없음

여백:0px;
#content div.showContent >라인 높이:100px;
디스플레이: 블록
배경색:#B0C4DE;
.showTab{
배경색:#B0C4DE; : 1px 단색
}
div li{
배경색:#5F9EA0;
경계 하단: 1px 단색 흰색;
경계 오른쪽; : 1px 흰색;
높이: 30px;
줄 높이: 30px;
중앙; >#content div{
배경 색상:
display:none;
clear: 왼쪽;
너비:300px
높이: 100px;

페이지 지금까지는 정적 페이지일 뿐이며, 다음 단계가 가장 중요한 부분입니다. 이 부분은 마우스를 움직여 태그를 전환하고 동적 페이지를 구현하는 것입니다. 물론 다른 JS 파일을 추가해야 합니다. JQuery 기반 JS 파일은 JQuery 공식 웹사이트에서 얻을 수 있는 최신 jquery-1.8.1.min.js를 사용합니다. 이 예에서는 라벨 전환을 구현합니다.




코드 복사


코드는 다음과 같습니다.


$( function(){
$("#contenTab li").each(function() {
var tab = $(this);
var timeoutID;
tab.hover(function(){
timeoutID = setTimeout(function(){
$(".showTab") .removeClass("showTab");
$(".showContent").removeClass("showContent");

tab.addClass("showTab");
$($("#content div" ).get($("#contenTab li").index(tab))).addClass("showContent"); >},300);
},function(){

clearTimeout(timeoutID ) })

지금까지는 멀티탭 전환이 구현되었습니다. 다음은 이 예에 대한 몇 가지 참고 사항입니다.

1. 마우스가 레이블 위로 이동할 때 마우스 모양을 손 모양으로 변경하기 위해(예:

) 이 예는 다음과 같습니다. 물론, 간단한 방법은 스타일 커서를

에 추가하는 것입니다.

2. Var timeoutID = setTimeout(function, time)은 마우스가 빠르게 움직일 때 오작동을 방지하기 위한 것입니다. 즉, 마우스가 레이블로 이동하면 즉시 전환 동작이 구현되지 않지만, 밀리초 내에 마우스가 레이블을 벗어나면 전환 동작이 지연됩니다. ClearTimeout(timeoutID)이 실행되어 밀리초 이후에는 함수의 내용이 실행되지 않으므로 빠른 마우스 움직임으로 인한 오작동을 방지할 수 있습니다.

오늘은 여기까지입니다. 도움이 되셨으면 좋겠습니다.