用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. 爬虫之爬取豆瓣top250电影排行榜及爬取斗图啦表情包解读及爬虫知识点补充

    今日内容概要 如何将爬取的数据直接导入Excel表格 #如何通过Python代码操作Excel表格 #前戏 import requests import time from openpyxl impo ...

  2. LeetCode-102-二叉树的层序遍历

    二叉树的层序遍历 题目描述:给你一个二叉树,请你返回其按 层序遍历 得到的节点值. (即逐层地,从左到右访问所有节点). 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:ht ...

  3. fibnacci数列的python实现

    费波那契数列(Successione di Fibonacci) 又译为费波拿契数.斐波那契数列.费氏数列.黄金分割数列 在数学上,费波那契数列是以递归的方法来定义: 用文字来说,就是费波那契数列由0 ...

  4. python 逻辑运算及奇怪的返回值（not,and,or）

    首先,'and'.'or'和'not'的优先级是not>and>or. 同一优先级从左往右计算. 先说非运算,Python的非运算与这些语言相比,并没有特别的地方.not只有两个返回值,T ...

  5. Eureka单机&集群配置

    目录 Eureka是什么 自我保护机制 版本选择 服务搭建 创建项目 导入GAV坐标 application启动类添加注解 配置yml 启动项目 集群配置 修改上面的yml 打jar包到另外一台电脑O ...

  6. 微信小程序实现图表展示

    开发可参考以下链接 点击有道云链接 小程序柱状图展示 [单元目标] 掌握小程序柱状图展示 [教学内容] 1.1 掌握组件导入 在miniprogram下的utils文件夹(若没有就新建一个)下,新建w ...

  7. 1. 查看NGINX是否在运行.

    1. 查看NGINX是否在运行. ps aux | grep nginx [root@bogon /]# ps aux | grep nginx root 2318 0.0 0.0 56816 127 ...

  8. 【elasticsearch】搜索过程详解

    elasticsearch 搜索过程详解 本文基于elasticsearch8.1.在es搜索中,经常会使用索引+星号,采用时间戳来进行搜索,比如aaaa-*在es中是怎么处理这类请求的呢?是对匹配的 ...

  9. Net Framework 中托管代码与非托管代码的区别

    托管代码与非托管代码的区别 1 简单的说,就是代码被编译成MSIL后在.net的Framework下运行,同操作系统底层的交互都交给framework去做. 所谓非托管代码就是脱离了Framework ...

  10. dotnet 委托的实现解析

    缘起 最近被问到什么是.Net中的委托.问题虽然简单却无从回答.只能说委托是托管世界的函数指针,这么说没啥大毛病,但也都是毛病(当时自己也知道这么说不太对,不过自己不太爱用这个也没准备确实没有更好的答 ...