HTML sample code for implementing tab switching

Tab switching is also a common technology in projects. Generally, tab switching is implemented using js or jq. Today, we will introduce two methods of implementing tab switching using only CSS:

Method 1:

Principle: The corresponding div is displayed through the associated attributes of the label tag and the single-select type of the input

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

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

3. Create a span tag (navigation content) and an input tag (to select and unselect) in each label. The type is radio. Also create a div as the content box when the navigation item is clicked.

It should be noted that the name of the input tag 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>

The important CSS is to set the width of the input to 0 so that the small dot on the input is not realistic, and to use the click of the navigation item to realize the checked input through the association of the label, and then realize the display of the corresponding div 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>

Method 2:

Principle: Switching is achieved through the anchor point of the a tag, that is, the href path of a is to switch the div id

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

2. Create a div with a class name of nav, and create four a tags inside it. The href of the a tag is the id of the div to be switched to.

3. Create a container with the class name sh that is a sibling of nav to place the switching div

4. Create a div to display the content, and the ids correspond to the a tags above

The final code is as follows:

<div class="wrap">
    <div class="nav">
        <a href="#home">home</a>
        <a href="#list">list</a>
        <a href="#news">news</a>
        <a href="#mine">mine</a>
    </div>
    <div class="sh">
        <div id="home">home-page</div>
        <div id="list">list-page</div>
        <div id="news">news-page</div>
        <div id="mine">mine-page</div>
    </div>
</div>

CSS style setting, that is, set the div with class name sh to display:none; then use div:target{display:block} to display the selected item

<style type="text/css">
        *{margin: 0;padding: 0}
        .wrap{
            width: 400px;
            height: 600px;
            border: 1px solid brown;
            margin: 20px auto;
            position: relative;
        }
        .nav{
            width: 100%;
            height: 30px;
        }
        .nav a{
            width: 99px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-right: 1px solid brown;
            border-bottom: 1px solid brown;
            float: left;
            text-decoration: none;
            color:black;
        }
        .sh{
            width: 400px;
            height: 569px;
            position: absolute;
            left: 0;
            top:31px;
            background: #eeeeee;
        }
        .sh div{
            display: none;
            text-align: center;
        }
        .sh div:target{
            display: block;
        }
    </style>

This is the end of this article about the sample code for implementing tab switching in html. For more relevant html tab switching content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: A brief discussion on mobile terminal adaptation

>>: Detailed explanation of the difference between JavaScript spread operator and rest operator