구조/표현/동작이 완전히 분리된 탭(jquery 버전 및 기본 JS 버전)_jquery

아이디어는 일반 탭과 동일합니다. 옵션 메뉴를 클릭하여 강조 표시하고 해당 옵션을 표시합니다. 이 기사의 경우 주로 인덱스 위치를 판단하여 옵션 영역을 표시하거나 숨깁니다. 메뉴 목록에서 메뉴를 클릭하면 기본 js에도 다양한 구현 방법이 있습니다(파란색 이상으로 검색). 이 기사의 예제에서는 루프 판단을 사용합니다.
몇 가지 지침:
1. 이 기사의 DEMO를 통해 기본 JS의 window.onload=function(){…}과 jQuery의 $(document).ready( function(){…}); 이것이 바로 초기 상태를 정의하기 위해 스타일을 사용하지 않는 이유입니다. 두 번째 및 세 번째 표시 영역이 아래에 숨겨져 있는 이유는
2. 탭. 동일한 페이지의 여러 탭에 사용되는 경우 변수는 함수 헤더에 집중되어 있으며 그 자체로 함수로 캡슐화될 수 있습니다.
3. 더 눈부신 효과, 효과를 직접 추가해 보세요.
4. 모두가 이 효과를 사용할 때 기계적으로 복사하여 붙여넣고 생각하고 연습한 다음 자신의 것으로 소화하는 것을 원하지 않습니다. >데모 보기: