用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. MongoDB聚合查询及Python连接MongoDB操作

    今日内容概要 聚合查询 Python操作MongoDB 第三方可视化视图工具 今日内容详细 聚合查询 Python操作MongoDB 数据准备 from pymongo import MongoCli ...

  2. 虚拟地址和物理地址(MMU)以及cache

    最近非常忙,博客很乱也没有更新,这里随便记录点东西,周末有空整理下. cache是一个与CPU很近的高速存储器, 作用:提高内存的访问读写速度 cache属性是指对这部分虚拟地址的读写是使用cache ...

  3. MyBatis动态 order by 排序不生效解决方法

    使用Mybatis在做一个项目时,发现需要动态的去做一个排序功能,于是乎有了下面XXXMapper.xml代码 <if test="order!=null and !order.isE ...

  4. Excel VBA中写SQL，这些问题的方法你一定要牢记

    小爬之前的文章 [Excel VBA中写SQL,这些问题你一定为此头痛过]中详细讲诉了一些常见的VBA 中使用SQL遇到的问题,这里再补充两个常见的问题场景及对应的解决方案,希望你们看了后能够思路开阔 ...

  5. 分布式边缘容器项目 SuperEdge v0.7.0 版本来袭！

    作者 SuperEdge 开发者团队,腾讯云容器中心TKE Edge团队 摘要 SuperEdge是基于原生Kubernetes的分布式边缘云容器管理系统,由腾讯云牵头,联合英特尔.VMware威睿. ...

  6. tp 防止xss攻击

    跨站脚本攻击(Cross Site Scripting),攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的. ...

  7. Eureka 基本教程

    目录 Eureka 基本教程 RestTemplate 使用 Eureka 使用 注册中心 提供者 消费者 Eureka 基本教程 RestTemplate 使用 学习Euraka的同学直接滑到最下面 ...

  8. BBS项目分布搭建五(评论相关功能实现)

    BBS项目分布搭建五(评论相关) 1. 根评论逻辑实现 # 在models.py文件中 修改: # 7. 评论表 parent = models.ForeignKey(to='self', null= ...

  9. Net6 Configuration & Options 源码分析 Part2 Options

    Net6 Configuration & Options 源码分析 Part2 Options 第二部分主要记录Options 模型 OptionsConfigurationServiceCo ...

  10. Three.js 火焰效果实现艾尔登法环动态logo 🔥

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 <艾尔登法环>是最近比较火的一款游戏,观察可以发现它的 Log ...