纯CSS实现Tab页切换效果-H5教程-PHP中文网

首页

web前端

H5教程

纯CSS实现Tab页切换效果

php中世界最好的语言

Mar 20, 2018 pm 01:23 PM

css效果

这次给大家带来纯CSS实现Tab页切换效果，纯CSS实现Tab页切换效果的注意事项有哪些，下面就是实战案例，一起来看一下。

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

1、利用 :hover 选择器

缺点：只有鼠标在元素上面的时候才有效果，无法实现选中和默认显示某一个的效果

2、利用 a标签的锚点 + :target选择器

缺点：因为锚点会将选中的元素滚动到页面最上面，每次切换位置都要移动，体验极差。

3、利用 label和radio 的绑定关系和 radio选中时的:checked 来实现效果

缺点：HTML结构元素更复杂

经过实验发现第三种方法达到的效果最好。所以下面讲一下第三种实现的方法。

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

绑定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;
    /* 为了修饰存在的层级使下边框遮挡下方p的上边框 */
    z-index: 10;
}
/* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
input[type="radio"]:checked~.tab-box {
    /* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
    z-index: 5;
}

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

演示地址

代码：

<!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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

max-width和min-width的使用技巧

text-align如何实现两端对齐

Mac系统里MySQL重置Root密码

以上是纯CSS实现Tab页切换效果的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码：可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构，提高SEO。2.ARIA属性如aria-label增强可访问性，辅助技术用户可顺利使用网页。

H5与HTML5相同吗？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多数情况下是相同的，但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准，包含新标签和API。2."h5"通常是HTML5的简称，但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

H5的功能是什么？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五个版本，它为开发者提供了更强大的工具集，使得创建复杂的网页应用变得更加简单。H5的核心功能包括：1）元素允许在网页上绘制图形和动画；2）语义化标签如、等，使网页结构清晰，利于SEO优化；3）新API如GeolocationAPI，支持基于位置的服务；4）跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。

h5链接怎么做Apr 06, 2025 pm 12:39 PM

如何创建 H5 链接？确定链接目标：获取 H5 页面或应用程序的 URL。创建 HTML 锚点：使用 <a> 标记创建锚点并指定链接目标URL。设置链接属性（可选）：根据需要设置 target、title 和 onclick 属性。添加到网页：将 HTML 锚点代码添加到希望链接出现的网页中。

h5兼容问题怎么解决Apr 06, 2025 pm 12:36 PM

解决 H5 兼容问题的方法包括：使用响应式设计，允许网页根据屏幕尺寸调整布局。采用跨浏览器测试工具，在发布前测试兼容性。使用 Polyfill，为旧浏览器提供对新 API 的支持。遵循 Web 标准，使用有效的代码和最佳实践。使用 CSS 预处理器，简化 CSS 代码并提高可读性。优化图像，减小网页大小并加快加载速度。启用 HTTPS，确保网站的安全性。