Example Code of Tab Page Switching Effect with CSS

Time:2019-10-8

Recently, when cutting a page, it involves a tab switching part, because you don’t want to use js to think about whether you can use pure CSS selector to achieve the switching effect. I searched the following three ways of writing.

1. Utilization: Hover selector

Disadvantage: Only when the mouse is above the element, it can not achieve the effect of selecting and default display of a certain one.

2. Anchor Point with a Label +: Target Selector

Disadvantage: Because the anchor will scroll the selected elements to the top of the page, each switch will move, the experience is very poor.

3. Use the binding relationship between label and radios and checked when radios are selected to achieve the effect.

Disadvantage: HTML structural elements are more complex

The experiment shows that the third method achieves the best effect. So let’s talk about the third method of implementation.

This method of writing is not fixed, when I look up information, all kinds of writing have once confused me. Finally, I found that the general idea is the same, but the following steps.

  1. Binding label and radio: Needless to say Id and for attribute binding
  2. Hide radio button: This method has many ways to give full play to your imagination, I have seen the method of setting display: none; hide, set absolute positioning, set the left to a large negative value, move to the outside of the page to achieve hiding effect, set ** absolute positioning: make elements out of the document flow, and then opacity: 0; ** set to transparency to achieve hiding effect.
  3. Hide extra tab pages: in the same way as above, you can also set hierarchical relationship through Z-index to block each other.
  4. Set the default: Add the checked= “checked” attribute to the default button
  5. Setting Selection Effect: Use + selector and ~ selector to set the style of tab page below the selected corresponding elements to achieve the selected effect.
/*Set the properties of its test label sibling when radio is selected*/
input[type="radio"]:checked+.test-label {
    /* To modify the existing border background properties*/
    border-color: #cbcccc;
    border-bottom-color: #fff;
    background: #fff;
    /* To modify the existing hierarchy, the lower border blocks the upper border of the lower div.*/
    z-index: 10;
}
/* Set the display level of tab-box elements at the same level as radios when they are selected*/
input[type="radio"]:checked~.tab-box {
    /* When selecting, the level is raised and other tab pages are blocked to achieve the effect of selecting and switching.*/
    z-index: 5;
}

In this way, we can achieve a Tab page switching effect, without a little js, of course, there are compatibility issues. In practice, it is better to use js for tab pages. Here’s the code for the little Demo, which has a lot of styles, mainly to achieve various selection effects. The core code that really achieves the goal of choosing switching is just a few lines.

Demo address

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS to achieve Tab handover effect </title>
    <style>
        ul {
            margin: 0;
            padding: 0;

        }
        .clearfloat {
            zoom: 1;
        }
        .clearfloat::after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0;
        }

        .tab-list {
            position: relative;
        }

        .tab-list .tab-itom {
            float: left;
            list-style: none;
            margin-right: 4px;
        }

        .tab-itom .test-label {
            position: relative;
            display: block;
            width: 85px;
            height: 27px;
            border: 1px solid transparent;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            line-height: 27px;
            text-align: center;
            background: #e7e8eb;
        }

        .tab-itom .tab-box {
            /* Setting absolute positioning facilitates positioning relative to the tab-list column, while using the Z-index attribute*/
            position: absolute;
            left: 0;
            top: 28px;
            width: 488px;
            height: 248px;
            border: 1px solid #cbcccc;
            border-radius: 5px;
            border-top-left-radius: 0px;
            background: #fff;
            /* Setting the lowest level for easy selection of state occlusion*/
            z-index: 0;
        }
        /* Use absolute positioning to detach the button from the document stream and hide it with transparency set to 0*/
        input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        /* tab switching by selector*/

        /*Set the properties of its test label sibling when radio is selected*/
        input[type="radio"]:checked + .test-label {
            /* To modify the existing border background properties*/
            border-color: #cbcccc;
            border-bottom-color: #fff;
            background: #fff;
            /* To modify the existing hierarchy, the lower border blocks the upper border of the lower div.*/
            z-index: 10;
        }
        /* Set the display level of tab-box elements at the same level as radios when they are selected*/
        input[type="radio"]:checked ~ .tab-box {
            /* When selecting, the level is raised and other tab pages are blocked to achieve the effect of selecting and switching.*/
            z-index: 5;
        }
    </style>
</head>

<body class="clearfloat">
    <ul class="tab-list clearfloat">
        <li class="tab-itom">
            <input type="radio" id="testTabRadio1" class="test-radio" name="tab" checked="checked">
            <label class="test-label" for="testTabRadio1">tab 1</label>
            <div class="tab-box">
                111111111111
            </div>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio2" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio2">tab 2</label>
            <div class="tab-box">
                2222222222222
            </div>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio3" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio3">tab 3</label>
            <div class="tab-box">
                33333333333333
            </div>
        </li>
    </ul>
</body>

</html>

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.