用CSS实现Tab页切换效果

时间 2019-11-17

标签 css 实现 tab 切换效果栏目 CSS 繁體版

原文原文链接

用CSS实现Tab切换效果

最近切一个页面的时候涉及到了一个tab切换的部分，由于不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大体有下面三种写法。css

利用:hover选择器
- 缺点：只有鼠标在元素上面的时候才有效果，没法实现选中和默认显示某一个的效果
利用a标签的锚点 + :target选择器
- 缺点：由于锚点会将选中的元素滚动到页面最上面，每次切换位置都要移动，体验极差。
利用label和radio的绑定关系和radio选中时的:checked来实现效果
- 缺点：HTML结构元素更复杂

通过实验发现第三种方法达到的效果最好。因此下面讲一下第三种实现的方法。html

这种方法的写法不固定，我查资料的时候各类各样的写法都有一度让我一头雾水的。最后看完发现整体思路都是同样的，无非就是下面的几个步骤。git

绑定label和radio：这个不用说id和for属性绑定
隐藏radio按钮：这个方法有不少充分发挥大家的想象力就能够了，我见过的方法有设置display:none;隐藏的、设置绝对定位，将left设置为很大的负值，移动到页面外达到隐藏效果、设置**绝对定位：使元素脱离文档流，而后opacity: 0;**设置为透明来达到隐藏效果。
隐藏多余的tab页：和上面同理，还能够经过z-index设置层级关系来相互遮挡。
设置默认项：在默认按钮上添加checked="checked"属性

设置选中效果：利用+选择器和 ~选择器来设置选中对应元素时下方的tab页的样式，来达到选中的效果

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

这样就能够实现一个Tab页切换的效果了，不用一点儿js，固然确定也有兼容性的问题。实际操做中tab页仍是使用js比较好。下面是小Demo的代码，样式比较多主要是为了实现各类选中效果，真正用来达到选择切换目地的核心代码就几行github

演示地址ui

代码：spa

<!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; /* 为了修饰存在的层级使下边框遮挡下方div的上边框 */ 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>
            <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">选项卡二</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">选项卡三</label>
            <div class="tab-box">
                33333333333333
            </div>
        </li>
    </ul>
</body>

</html>
复制代码