HTML에서 탭 페이지 전환을 구현하는 방법

HTML에서 탭 페이지 전환을 구현하는 방법: 먼저 클래스 이름이 래핑된 div를 컨테이너로 만든 다음 4개의 레이블 태그를 만들고 마지막으로 탐색 항목으로 div를 만듭니다.

이 튜토리얼의 운영 환경: windows7 시스템, html5 버전, DELL G3 컴퓨터.

HTML에서 탭 페이지 전환을 구현하는 방법:

원리: 레이블 태그의 관련 속성과 입력의 라디오 선택 유형을 통해 해당 div를 표시합니다

1. 컨테이너

2. 탭 전환 항목 역할을 할 4개의 라벨 라벨을 생성합니다

3. 각 라벨에 스팬 라벨(탐색 콘텐츠)을 생성하고 입력 라벨(선택 및 선택 취소 구현) 유형 유형은 라디오이고 생성 a 이 탐색 항목으로 div를 클릭하면 콘텐츠 상자가 표시됩니다.

여기서 주의할 점은 입력 태그의 이름이 동일해야 한다는 점입니다. 저는 tab으로 이름을 지정했습니다.

최종 HTML은 다음과 같습니다.

  home  
home-page
   list  
list-page
   news  
news-page
   mine  
mine-page
  

중요한 CSS, 입력 너비를 0으로 설정하면 입력의 작은 점이 비현실적이며 레이블 연결을 통해 탐색 항목의 클릭을 사용하여 체크된 입력을 구현한 다음 해당 div를 사용합니다. input:checked+div{display:block}

표시를 통해 실현됩니다. 관련 학습 권장사항:html 비디오 튜토리얼

위 내용은 HTML에서 탭 페이지 전환을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!