<!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. Winform 实现无边框窗体移动功能

    #region 窗体移动 [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [DllImp ...

  2. linux开机出现一下错误Give root password for maintenance (or type Control-D to continue):

    由于错误的编辑/etc/fstab文件 而引起的不能正常进入系统.假如你将某一个分区或者磁盘最后一个参数设置为1或2时,系统默认会在开机过程中检查这个磁盘的扇区.假如系统检查不到这个磁盘,或者这个磁盘 ...

  3. idea14导入eclipse项目并部署运行完整步骤

    idea14导入eclipse项目并部署运行完整步骤 2015年05月12日 14:08:04 阅读数:40456 首先说明一下:idea里的project相当于eclipse里的workspace, ...

  4. LeetCode——3. Longest Substring Without Repeating Characters

    一.题目链接:https://leetcode.com/problems/longest-substring-without-repeating-characters 二.题目大意: 给定一个字符串, ...

  5. Espresso小试

    Espresso开源了,那就试着用一下, 1. 下载Espresso Espresso没有提供单独的jar包下载,建议clone整个项目或者下载zip包 git clone https://code. ...

  6. 配置文件elasticsearch.yml详解

    在es根目录下的config目录中有elasticsearch.yml配置文件,es加载使用的yml格式配置 17行:cluster.name: 自定义集群名称(强烈推荐默认名称elasticsear ...

  7. [转][C#]降级.net 源码4.5

    来自:https://www.cnblogs.com/had37210/p/8057042.html 主要是 Task 的降级: 1.net4.5.2 引入了 async/await 关键字. 这个其 ...

  8. 廖雪峰Java5集合-1Java集合简介-1Java结合简介

    1.集合 定义:集合就是一堆东西.集合里的东西,称为元素Element 数学中的集合: 有限集合: * 一个班所有的学生组成的集合 * 一个网站所有的商品组成的集合 无限集合: * 全体自然数集合 * ...

  9. jQuery绑定和解绑点击事件及重复绑定解决办法

    原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...

  10. [UE4]动态改变相机OrthWidh、关掉阴影

    在制作缩略图的时候,每次都要手动不断尝试合适的OrthWidh,很是麻烦. 一.使用蓝图实现鼠标滚动动态改变OrthWidh.Get Ortho Width,Set Ortho Width 二.去掉阴 ...