jQuery tab_jquery의 간단한 구현

jQuery는 탭 기능을 구현합니다. 먼저 인터페이스를 설정합니다.

탐색 헤더 tab_menu와 콘텐츠 tab_box가 있습니다.

얻을 수 있는 효과는 클릭하면 해당 콘텐츠가 표시되고 다른 콘텐츠는 숨겨지는 것입니다.

동시에 선택한 상태를 보여주기 위해 선택한 항목에 배경을 추가하여 차이점을 보여줍니다.

이번에는 제가 직접 코드를 작성해 봤습니다. 먼저 html 부분을 살펴보겠습니다.

코드를 복사하세요 다음과 같습니다:

;/li>
< ;div class="tab_box"> hide">Entertainment

> ;
 

HTML에서는 내부에 두 개의 하위 div가 있는 큰 div가 필요합니다. 하나는 탐색 헤더 tab_menu 역할을 합니다. 다른 하나는 콘텐츠 본문 tab_box 역할을 합니다. CSS 코드는 HTML 콘텐츠의 레이아웃을 담당합니다.

css 부분:




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

*{margin :0;padding:0;}.tab{ width:240px; margin:50px;

/*border:1px solid;*/

}
.tab_menu{
clear:both;
}
.tab_menu li{
float:left; //탐색 헤드를 왼쪽으로 이동
text-align: center; //탐색 헤드를 왼쪽으로 띄우기
list-style:none; //표시 기호 제거
background:#F1F1F1; //기본 배경색 설정
border:1px #898989; //테두리 색상 설정
margin- right:4px; //각 li 사이의 거리는 4px입니다.
cursor:pointer; //마우스가 떠오른 후 작은 손 모양이 나타납니다
padding:1px 6px; //li
border-bottom:none;

}
.tab_menu li.hover{
background:#DFDFDF;
}
.tab_menu li.selected{//선택됨 배경 및 색상을 추가하는 옵션
color:#FFF
background:#6D84B4;
}
.tab_box{
삭제 :both; //플로트 효과의 영향 지우기
height: 100px; //높이를 100px로 설정
border:1px solid #898989; //콘텐츠 본문의 테두리 스타일 설정
}
.hide{//숨겨야 하는 콘텐츠 div 숨기기
display:none ;
}


레이아웃이 완료된 후 jQuery 작업을 수행합니다.




코드 복사

코드는 다음과 같습니다.

// $(function(){

var $div_li =$("div.tab_menu ul li");

        $div_li.click(function(){

                                                           . /다른 형제

요소의 강조 표시 제거 🎜>            var index =   $div_li.index(this) // 현재의 인덱스를 가져옵니다. 모든 li 요소에서

요소를 클릭했습니다. "div.tab_box > div") // 하위 노드가 선택되지 않은 경우 div

.eq가 있는 경우 오류가 발생합니다. (index).show() // 해당

요소를 표시합니다. .siblings().hide() //다른

요소를 숨깁니다.

})

//]]> ;

여기서의 처리는 특히 li의 인덱스를 획득하여 옵션 본문을 처리합니다. 이는 인덱스 값인 숨겨진 대응 관계를 교묘하게 사용합니다.

이렇게 하면 옵션 헤더와 옵션 본문 내용이 일치하지 않더라도 연결 효과를 얻을 수 있습니다.

이 연습을 통해 먼저 생각을 해볼 수 있도록 뇌를 사용하는 것이 더 낫다는 것을 느꼈습니다. 생각의 차이를 발견해야만 단점을 발견하고 격차를 알 수 있습니다. 때로는 당신의 아이디어가 더 좋을 수도 있습니다!