用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. Tableau学习Step3——数据的连接与基本图形的制作

    Tableau学习Step3--数据的连接与基本图形的制作 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一. 前言 本教程通过一个案例从浅到深来学习Tableau知识 案例概述 Nort ...

  2. Scipy和Numpy的插值对比

    技术背景 插值法在图像处理和信号处理.科学计算等领域中是非常常用的一项技术.不同的插值函数,可以根据给定的数据点构造出来一系列的分段函数.这一点有别于函数拟合,函数拟合一般是指用一个给定形式的连续函数 ...

  3. SpringCloud Nacos + Ribbon 调用服务的 2 种方法！

    在 Nacos 中,服务调用主要是通过 RestTemplate + Ribbon 实现的,RestTemplate 是 Spring 提供的 Restful 请求实现类,而 Ribbon 是客户端负 ...

  4. 用端口映射的办法使用矩池云隐藏的vnc功能

    矩池云隐藏了很多高级功能待用户去挖掘. 租用机器 进入jupyterlab 设置vnc密码 VNC_PASSWD="userpasswd" ./root/vnc_startup.s ...

  5. Vue2.0双向数据绑定原理

    Object.defineProperty(objectName, key, option); Object.defineProperty()可以直接在一个对象上定义一个新属性, 或者修改一个属性, ...

  6. 编译OneAPI（支持Nvidia显卡）

    开始使用DPC++ 官方安装教程 预备条件 请确保当前开发环境满足如下条件: git cmake版本需要满足3.14及以上. python版本3.6以上的python. nijia版本1.8及以上(使 ...

  7. 9.Flink实时项目之订单宽表

    1.需求分析 订单是统计分析的重要的对象,围绕订单有很多的维度统计需求,比如用户.地区.商品.品类.品牌等等.为了之后统计计算更加方便,减少大表之间的关联,所以在实时计算过程中将围绕订单的相关数据整合 ...

  8. jdbc action 接口示例

    package com.gylhaut.action; import java.sql.SQLException;import java.util.ArrayList;import java.util ...

  9. 在kali中安装两个版本的python

    在kali中安装两个版本的python 在kali中已经预装了两个版本的python,但是没有装pip(>︿<). 这时使用python或者python3表示python3:使用pytho ...

  10. luoguP6622 [省选联考 2020 A/B 卷] 信号传递(状压dp)

    luoguP6622 [省选联考 2020 A/B 卷] 信号传递(状压dp) Luogu 题外话: 我可能是傻逼, 但不管我是不是傻逼, 我永远单挑出题人. 题解时间 看数据范围可以确定状压dp. ...