用CSS实现Tab切换效果

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

  1. 利用:hover选择器

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

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

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

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

    • 缺点：HTML结构元素更复杂

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

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

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

  5. 设置选中效果：利用+选择器 和 ~选择器来设置选中对应元素时下方的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的代码，样式比较多主要是为了实现各种选中效果，真正用来达到选择切换目地的核心代码就几行

演示地址

代码：

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

用CSS实现Tab页切换效果的更多相关文章

  1. 利用jquery写的一个TAB页切换效果

    函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...

  2. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  3. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  4. ECSHOP：首页实现显示子分类商品，并实现点击Tab页切换分类商品

    例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始:    1. 打开调试开关     文件地址:include/cls_template.php 找到 : functi ...

  5. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  6. tab页切换

    做了一个tab页切换.点击不同tab,显示对应的内容信息 如图 =================HTML===================== <!doctype html public ...

  7. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  8. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  9. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

随机推荐

  1. SQL Server的Linked Servers（链接）

    我们在使用SQL Server时,有时会有这种需求,需要从一个SQL Server服务器A中,查询另一个SQL Server服务器B中的表,然后将SQL Server服务器A中的表和SQL Serve ...

  2. 【系列】关于NJUPT电赛自控方向第一次积分赛的总结

    本人是NJUPT电子科学与技术专业大一摸鱼狗一枚.本博客旨在总结与分享个人准备电赛所学知识,同时也是为了防止遗忘,锻炼写文章的能力.目前电赛方向为自控方向.主要研究方向为单片机.图像处理.自动控制相关 ...

  3. CF1327F题解

    首先第一步,位运算拆位.变为一个区间的 \(And\) 为 \(0\) 或 \(1\). 如果 \(And\) 为 \(1\),那么所有数都需要为 \(1\),否则为 \(0\). 我们把所有可能为 ...

  4. 2022年官网下安装Elasticsearch最全版与官网查阅方法（8.1.0最新安装）

    目录 一.环境整合(需要提前装好) 构建工具(参考工具部署方式) 二.官方下载Elasticsearch部署安装 1.百度搜索"Elasticsearch",或者访问官网https ...

  5. 福利|GISer需知网站

    一些GISer需知的网站推荐 1.https://www.usgs.gov/ 美国地质调查局 美国地质勘探局(United States Geological Survey,简称USGS),又译美国地 ...

  6. 获取bing首页的每日一图

    从必应(bing)首页抓取他的每日一图 以前上学时,曾经用python写过一个每天抓取bing每日一图的小工具. 现在想用java来重构一下. 抓取图片的思路 首先获取网页源码 从网页源码中,我们可以 ...

  7. CentOS 8 EOL如何切换源？

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 CentOS 8操作系统版本结束了生命周期(EOL),Linux社区已不再维护该操作系统版本.建议您切换到Anolis或Alinux.如果您的业 ...

  8. SQL Server 2008安全加固手册

    1.身份鉴别 1.1避免使用空密码和弱口令 要求:应对登录操作系统和数据库系统的用户进行身份标识和鉴别. 目的:操作系统和数据库系统管理用户身份鉴别信息应具有不易被冒用的特点,口令应有复杂度要求并定期 ...

  9. vue学习过程总结（07） - vue的后台服务API封装及跨域问题的解决

    以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...

  10. mycat的安装及使用 看这一篇就够了

    1.环境准备 ​ 本次使用的虚拟机环境是centos6.5 ​ 首先准备四台虚拟机,安装好mysql,方便后续做读写分离和主从复制. 192.168.85.111 node01 192.168.85. ...