<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="main.css">

    <script src="main.js"></script>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            position: relative;

        }

        #tab>input{

            /* opacity: 0; */

            /* position: absolute; */

            top: 0px;

            left: 0px;

            /* 见absolute.html */

        }

        #tab .label{

            overflow: hidden;

        }

        #tab .label > label{

            float: left;

            width: 100px;

            height: 30px;

            line-height: 30px;

            border: 1px solid #dedede;

            text-align: center;

            margin-left: -1px;

            /* 用来取消边框的1px实现扁平效果（？） */

        }

        .content li{

            display: none;

        }

        /* 先把所有的都隐藏起来 ，每次把需要显示的一个放出来*/

        input:nth-of-type(1):checked~.label>label:nth-of-type(1){

            background-color: red;

            color: #fff;

        }

        /* #a~b  选择每个#a后面的同级b */

        /* ntn-of-type：属于其父元素的第X个的每个  如上面：属于其父元素的第一个input的每个input   */

        /*加号：相邻兄弟选择器，如 h1+p  选择紧跟在h1后面的p*/

        input:nth-of-type(2):checked~.label>label:nth-of-type(2){

            background-color: red;

            color: #fff;

        }

        input:nth-of-type(3):checked~.label>label:nth-of-type(3){

            background-color: red;

            color: #fff;

        }

        input:nth-of-type(1):checked~.content li:nth-of-type(1){

            display: block;

        }

        input:nth-of-type(2):checked~.content li:nth-of-type(2){

            display: block;

        }

        input:nth-of-type(3):checked~.content li:nth-of-type(3){

            display: block;

        }

    </style>

</head>

<body>

    <div id="tab">

        <!-- 这里是把label和input绑定了嗷（通过label的for属性） -->

        <input checked type="radio" name="name" id="name1">

        <input  type="radio" name="name" id="name2">

        <input  type="radio" name="name" id="name3">

        <div class="label">

            <label for="name1">页面1</label>

            <label for="name2">页面2</label>

            <label for="name3">页面3</label>

        </div>

        <div class="content">

            <ul>

                <li>内容1</li>

                <li>内容2</li>

                <li>内容3</li>

            </ul>

        </div>

    </div>

</body>

</html>

理解 input:nth-of-type(3):checked~.label>label:nth-of-type(3)的意思：

被选中的、为父元素的第三个input元素的所有input元素（:nth-of-type）（这里只有一个），后面跟着的同级的（父元素的兄弟元素的子元素也算平级）（~）类名为label的

div中，为其第三个label元素的所有label应用样式。把样式表中#tab>input的opacity和position应用可以隐藏掉input标签

更深一层：在body中label和input进行了绑定，当你点击一个label，对应的input就会变为被选中状态，从而进行更改对应的label样式与显示内容

为什么不直接让label被点击时改变样式？

无法同步实现内容的切换：试了一下发现label本身点击是没有意义的，除非绑定了input。

强行想要不通过input也可以通过jQuery，使用addClass和removeClass，注意.addClass（'.classname'）是错误的，没有那个‘.’

 

checked选择器实现tab切换的更多相关文章

  1. 几个不同的tab切换示例

    上一篇<论tab切换的几种实现方法>中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例. 一.仿”中国人民大学“官网的tab切换,背景是图片,效果图如下 ...

  2. 论tab切换的几种实现方法

    tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> ...

  3. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  5. 前端实现Tab切换栏

    tab切换,所需的 UI 只有两组元素 - Header 和 Tab,下面介绍几种不同的实现方法和他们的优缺点 本文主要说一些 CSS 的实现方法.最好的方法是 第四种 => label + i ...

  6. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  7. javascript回车完美实现tab切换功能

    javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...

  8. Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...

  9. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

随机推荐

  1. 黄聪：php精度计算问题

    如果用php的+-*/计算浮点数的时候,可能会遇到一些计算结果错误的问题,比如echo intval( 0.58*100 );会打印57,而不是58,这个其实是计算机底层二进制无法精确表示浮点数的一个 ...

  2. AS3面试题 个人理解

    现在as3面试 感觉就那几个题目来回考.有了题库,大家都看了 都答上来了 题目本身也就失去了考核的意义.而且题目本身也有很多偏的(不常用的)在考. 真正的面试官现在肯定也不会把笔试成绩当作标准.所谓: ...

  3. javase每天内容总结(32期)

    第一天 环境变量 编译与运行 dos命令 第二天 数据类型 运算符(三元) 第三天 引用数据类型(Scanner和Random) 流程控制语句 第四天 数组 第五天 方法(重载) 第六天 类 Arra ...

  4. 若是汉字的一半，就舍弃这个汉字输出，例如：“js3范ad啊asd”，截取4，则输出：“js3”

    package com.jt.test.redis; import org.junit.Test; /* 题目要求 * 编码:GBK,一个英文字符占一个字节,一个汉字占2个字节 * 随机给定一个字符串 ...

  5. UnicodeString基本操作(Ring0)

    #include "Unicode_String_Ring0.h" //bp Unicode_String_Ring0!DriverEntry NTSTATUS DriverEnt ...

  6. Linux系统安装（centos6.8）符破解码

    1.安装 VMware VMware 是一个虚拟 PC 的软件,可以在现有的操作系统上虚拟出一个新的硬件环境,相当于模拟出一台新的 PC,我们可以在上面构造出一个或多个别的系统,以此来实现在一台机器上 ...

  7. java jdk版本切换

    首先看链接: 1. 这个链接清晰,但不一定能成功,但也不一定:https://blog.csdn.net/spt_dream/article/details/70673836 2. 其次这个链接比较完 ...

  8. 0001 - Spring 框架和 Tomcat 容器扩展接口揭秘

    前言 在 Spring 框架中,每个应用程序上下文(ApplicationContext)管理着一个 BeanFactory,BeanFactory 主要负责 Bean 定义的保存.Bean 的创建. ...

  9. 分段覆盖率TPR

    黑产监控中,需要尽可能做到尽可能少的误伤和尽可能准确地探测,可以选择“在FPR较低时的TPR加权平均值”作为平均指标. 根据混淆矩阵计算TPR(覆盖率)和FPR(打扰率): 覆盖率:TPR = TP ...

  10. scala使用hbase新api

    import org.apache.hadoop.hbase.{HTableDescriptor,HColumnDescriptor,HBaseConfiguration,TableName} imp ...