How to implement tab page switching in html

htmlHow to implement tab page switching: First create a div with the class name wrap as a container; then create four label tags, and create a span tag in each label; finally create a div as this Navigation items.

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer.

html method to implement tab page switching:

Principle: Display the corresponding div through the associated attributes of the label label and the radio selection type of the input

1. Create a div with the class name wrap as a container

2. Create four label labels, which will serve as tab switching items

3. Create a span in each label Label (navigation content), input label (implementation of selection and deselection) type is radio, and a div is also created as the content box is displayed when this navigation item is clicked.

What should be noted here is the input label The names must be the same. I named it tab

The final HTML is as follows:

<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>

Important css, by setting the width of the input to 0, the small size of the input The dots are unrealistic, and the input is checked by clicking on the navigation item through the association of the label, and then the display of the corresponding div is realized through 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>

Related learning recommendations: html video tutorial

The above is the detailed content of How to implement tab page switching in html. For more information, please follow other related articles on the PHP Chinese website!