用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. vue项目如何引用jquery

    虽然vue不推荐直接操作DOM,而且也提供了操作DOM的方式.但是在某些时候还是要用到jquery,那么如何引入jquery呢? 费了半天劲,记录一下: 一 : 安装jquery npm instal ...

  2. iOS实现组件录屏视频不可见，用户肉眼可见（类似系统键盘效果）

    系统键盘在密码框输入时,如果用户开启录屏,键盘在录屏得到的视频里会不可见,但是用户在录屏时却能看到. 为了实现这个效果,利用UItextfield在录屏下视频不可见的特性,将实现这一效果的私有UIvi ...

  3. 小白上手Linux系统安装jdk教程

    1.查看是否有预装jdk及jdk版本: rpm -qa|grep jdk 如果有则卸载安装:rpm -e --nodeps jdk-1.7.0_79-fcs.x86_64 2.先将linux版的jdk ...

  4. 【Azure API 管理】使用APIM进行XML内容读取时遇见的诡异错误 Expression evaluation failed. Object reference not set to an instance of an object.

    问题描述 使用APIM,在 Inbound 中对请求的Body内容进行解析.客户端请求所传递的Request Body为XML格式,需要从Request Body中解析出多个(Element)节点值, ...

  5. [源码解析] NVIDIA HugeCTR，GPU 版本参数服务器 --(9)--- Local hash表

    [源码解析] NVIDIA HugeCTR,GPU 版本参数服务器 --(9)--- Local hash表 目录 [源码解析] NVIDIA HugeCTR,GPU 版本参数服务器 --(9)--- ...

  6. Redis集群-Cluster模式

    我理解的此模式与哨兵模式根本区别: 哨兵模式采用主从复制模式,主和从数据都是一致的.全量数据: Cluster模式采用数据分片存储,对每个 key 计算 CRC16 值,然后对 16384 取模,可以 ...

  7. LGP7840题解

    给出一种新的理解方式,本质上和正解是一致的. 首先我们现在已经有了一个森林,我们现在要给他加一条边,加哪一条边是最优的呢? 假设加的边是 \((u,v)\),那么 \(((d[u]+1)^2-d[u] ...

  8. LGP7580题解

    设: \[g(x)=\prod_{i=1}^{k_i}\binom {m} {c_{d,i}+m} \] 那么很明显有: \[f= a * g \] 再看一眼 \(g\),我们发现 \(g\) 是积性 ...

  9. Hive框架

    1.什么是Hive? Hive 是基于Hadoop之上的数据仓库.2.什么是数据仓库? 数据仓库其实就是一个数据库 数据仓库是一个面向主题的,集成的,不可更新的,随时间不变化的数据集合,它用于支持 企 ...

  10. 基于WebSocket的简易聊天室

    用的是Flash + WebSocket 哦~ Flask 之 WebSocket 一.项目结构: 二.导入模块 pip3 install gevent-websocket 三.先来看一个一对一聊天的 ...