Use CSS to achieve Tab switching effect

I recently cut a page that involved a TAB switch because I didn’t want to use JS and wondered if I could use pure CSS selectors to achieve the switch effect. I searched for the following three ways to write it.

  1. using:hoverThe selector
    • Disadvantages: it only works when the mouse is over the element, not when one is selected or displayed by default
  2. usingThe anchor point of the A tag + :target selector
    • Cons: Poor experience because anchors scroll selected elements to the top of the page and move each time they switch positions.
  3. usingThe label and the radioThe binding relationship between andRadio of checkedTo achieve the effect
    • Disadvantages: HTML structure elements are more complex

Experiments show that the third method achieves the best effect. So let’s talk about the third way to do it.

This method of writing is not fixed, I looked up the various writing methods at one time I was confused. Finally, I found that the general idea is the same, nothing more than the following steps.

  1. Bind label and radio: This goes without saying to the ID and for attribute bindings
  2. Hide the Radio button: There are many ways to do this just use your imagination. The ones I’ve seen have Settingsdisplay:none;Hidden, SettingsAbsolute positioning, setting left to a large negative valueMove it out of the page to hide it, set ** absolute positioning: remove the element from the document flow, andopacity: 0;** Set to transparent for hiding effect.
  3. Hide extra TAB pages: Same as above, also can passz-indexSet up hierarchies to shade each other.
  4. Set defaults: Add on the default buttonchecked="checked"attribute
  5. Set selected effect: Uses+The selector and~Selector to set the style of the TAB below the selected element to achieve the selected effect 
    /* Sets the attribute of radio's test-label sibling */ when radio is selected
input[type="radio"]:checked+.test-label {
    /* To decorate the existing border background property */
    border-color: #cbcccc;
    border-bottom-color: #fff;
    background: #fff;
    /* To decorate the existing hierarchy, make the bottom border cover the top border of the underlying div */
    z-index: 10;
}
/* Set the display level of tab-box elements at the same level as radio when radio is selected */
input[type="radio"]:checked~.tab-box {
    /* When selected, elevate the level to block other TAB pages */
    z-index: 5;
}
Copy the code

This can achieve a Tab page switch effect, without a little JS, of course, there are certainly compatibility issues. In practice, it is better to use JS for TAB pages. The following is a small Demo code, more style is mainly to achieve a variety of selected effects, really used to achieve the selection of switching target core code on a few lines

Demo address

Code:


      
<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>The CSS implements Tab switching</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 {
            /* Set absolute positioning to facilitate positioning relative to tab-list, and to enable 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;
            /* Set the lowest level to facilitate the selection of state occlusion */
            z-index: 0;
        }
        /* Remove the button from the document flow with absolute positioning, and hide it with transparency set to 0 */
        input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        /* Use the selector to switch the TAB */

        /* Sets the attribute of radio's test-label sibling */ when radio is selected
        input[type="radio"]:checked + .test-label {
            /* To decorate the existing border background property */
            border-color: #cbcccc;
            border-bottom-color: #fff;
            background: #fff;
            /* To decorate the existing hierarchy, make the bottom border cover the top border of the underlying div */
            z-index: 10;
        }
        /* Set the display level of tab-box elements at the same level as radio when radio is selected */
        input[type="radio"]:checked ~ .tab-box {
            /* When selected, elevate the level to block other TAB pages */
            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">A TAB</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 three</label>
            <div class="tab-box">
                33333333333333
            </div>
        </li>
    </ul>
</body>

</html>
Copy the code