Home > Article > Web Front-end > Pure CSS to achieve Tab page switching effect

Pure CSS to achieve Tab page switching effect

php中世界最好的语言Original: 2018-03-20 13:23:024549browse

This time I will bring you pure CSS to achieve the Tab page switching effect. What are the precautions to achieve the Tab page switching effect with pure CSS? The following is a practical case, let's take a look.

When I cut a page recently, it involved a tab switching part. Because I didn’t want to use js, I thought about whether I could use a pure CSS selector to achieve the switching effect. After searching, there are roughly three ways of writing:

1. Use:hover selector

Disadvantages: The effect is only effective when the mouse is on the element, and the effect of selecting and displaying a certain one by default cannot be achieved

2. Using the anchor point of the a tag + :target selector

Disadvantages: Because the anchor point will scroll the selected element to the top of the page, it needs to be moved every time the position is switched, and the experience is extremely poor.

3. Use the binding relationship between label and radio and the :checked when radio is selected to achieve the effect

Disadvantages: HTML structural elements are more complex

After experiments, it was found that the third method achieves the best effect. So let’s talk about the third implementation method.

The writing method of this method is not fixed. When I checked the information, the various writing methods made me confused. After reading it, I found that the general idea is the same, which is nothing more than the following steps.

Binding label and radio: Needless to say binding id and for attributes
Hide radio button: This method has many uses for you Just use your imagination. The methods I have seen include setting display:none; to hide, setting
absolute positioning, setting left to a large negative value, moving it outside the page to achieve the hidden effect, and setting **Absolute positioning: Take the element out of the document flow, and then set opacity: 0; **Set to transparent to achieve the hidden effect.
Hide redundant tab pages: In the same way as above, you can also set hierarchical relationships through z-index to block each other.
Set the default item: Add the checked="checked" attribute to the default button
Set the selection effect: Use the + selector and ~ to select Use the tool to set the style of the tab page below when the corresponding element is selected to achieve the selection effect

/* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
input[type="radio"]:checked+.test-label {
    /* 为了修饰存在的边框背景属性 */
    border-color: #cbcccc;
    border-bottom-color: #fff;
    background: #fff;
    /* 为了修饰存在的层级使下边框遮挡下方p的上边框 */
    z-index: 10;
}
/* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
input[type="radio"]:checked~.tab-box {
    /* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
    z-index: 5;
}

In this way, you can achieve a tab page switching effect without using any js, of course There must be compatibility issues as well. In actual operation, it is better to use js for tab pages. The following is the code of a small demo. There are many styles mainly to achieve various selection effects. The core code that is actually used to achieve the purpose of selection 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实现Tab切换效果</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 {
            /* 设置绝对定位方便定位相对于tab-list栏的位置，同时为了可以使用z-index属性 */
            position: absolute;
            left: 0;
            top: 28px;
            width: 488px;
            height: 248px;
            border: 1px solid #cbcccc;
            border-radius: 5px;
            border-top-left-radius: 0px;
            background: #fff;
            /* 设置层级最低方便选中状态遮挡 */
            z-index: 0;
        }
        /* 用绝对定位使按钮脱离文档流，透明度设置为0将其隐藏 */
        input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        /* 利用选择器实现  tab切换 */
        /* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
        input[type="radio"]:checked + .test-label {
            /* 为了修饰存在的边框背景属性 */
            border-color: #cbcccc;
            border-bottom-color: #fff;
            background: #fff;
            /* 为了修饰存在的层级使下边框遮挡下方p的上边框 */
            z-index: 10;
        }
        /* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
        input[type="radio"]:checked ~ .tab-box {
            /* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
            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">选项卡一</label>
            <p class="tab-box">
                111111111111
            </p>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio2" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio2">选项卡二</label>
            <p class="tab-box">
                2222222222222
            </p>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio3" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio3">选项卡三</label>
            <p class="tab-box">
                33333333333333
            </p>
        </li>
    </ul>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Pure CSS to achieve Tab page switching effect

Related articles