<!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. Ubuntu Docker安装

    docker容器改变apt-get源 记得先:apt-get update 进入容器 cd /etc/apt echo "">sources.list echo " ...

  2. intellij idea 快捷输出 main方法的规律

    今天偶然发现了IntelliJ中 创建main函数的快捷键,依次还有for循环,System.out.println(); 在编写代码的时候直接输入psv就会看到一个psvm的提示,此时点击tab键一 ...

  3. 黄聪：wordpress教程

    又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...

  4. java.util.ConcurrentModificationException的解决办法

    今天在使用iterator.hasNext()操作迭代器的时候,当迭代的对象发生改变,比如插入了新数据,或者有数据被删除. 编译器报出了以下异常: Exception in thread " ...

  5. TCP/IP学习20180625-DNS

    1 DNS:domain name system域名系統把域名,轉換成IP2 最開始是一個hosts.txt,後來是數據庫,最後是分佈式數據庫3 每個名字服務器存儲一部分名字.如果有不知道的名字,就轉 ...

  6. Android Studio 小技巧

    请参照http://blog.csdn.net/jdsjlzx/article/details/50689047 个人认为较有用: 30

  7. Linux环境下配置maven环境

    1.下载安装包并解压 安装包直接去apache官网下载:https://maven.apache.org/download.cgi 将安装包放在自己指定的目录:/home/software/apach ...

  8. failed to launch: nice -n 0 /home/hadoop/spark-2.3.3-bin-hadoop2.7/bin/spark-class org.apache.spark.deploy.worker.Worker --webui-port 8081 spark://namenode1:7077

    spark2.3.3安装完成之后启动报错: [hadoop@namenode1 sbin]$ ./start-all.shstarting org.apache.spark.deploy.master ...

  9. Mongodb集群搭建之 Replica Set

    Mongodb集群搭建之 Replica Set Replica Set 中文翻译叫做副本集,不过我并不喜欢把英文翻译成中文,总是感觉怪怪的.其实简单来说就是集群当中包含了多份数据,保证主节点挂掉了, ...

  10. for循环.html

    <script> for (var i = 1; i < 5 ; i++) { alert(i); } 公式需要记住,并多加练习,加深记忆,注意编写格式 for (var i = 1 ...