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

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

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

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

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

1. 컨테이너

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

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

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

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

<div class="wrap">
    <label>
        <span>home</span>
        <input type="radio" name="tab" checked>
        <div>home-page</div>
    </label>
    <label>
        <span>list</span>
        <input type="radio" name="tab">
        <div>list-page</div>
    </label>
    <label>
        <span>news</span>
        <input type="radio" name="tab">
        <div>news-page</div>
    </label>
    <label>
        <span>mine</span>
        <input type="radio" name="tab">
        <div>mine-page</div>
    </label>
</div>

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

<style type="text/css">
        *{margin: 0;padding: 0;}
        .wrap{
            margin: 20px auto;
            width: 403px;
            height: 600px;
            border:1px solid brown;
            position: relative;
        }
        label{
            width: 100px;
            height: 30px;
            float: left;
            text-align: center;
            line-height:30px;
            border-right: 1px solid brown;
            border-bottom: 1px solid brown;
        }
        label:nth-of-type(4){
            border-right: none;
        }
        label span{
            cursor: pointer;
        }
        label div{
            width: 403px;
            height: 568px;
            position: absolute;
            left: 0;
            top: 31px;
            background: #eeeeee;
            display: none;
        }
        label input{
            width: 0;
        }
        input:checked+div{
            display: block;
        }
    </style>

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

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