checked选择器实现tab切换
<!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切换的更多相关文章
- 几个不同的tab切换示例
上一篇<论tab切换的几种实现方法>中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例. 一.仿”中国人民大学“官网的tab切换,背景是图片,效果图如下 ...
- 论tab切换的几种实现方法
tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- 前端实现Tab切换栏
tab切换,所需的 UI 只有两组元素 - Header 和 Tab,下面介绍几种不同的实现方法和他们的优缺点 本文主要说一些 CSS 的实现方法.最好的方法是 第四种 => label + i ...
- 教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模 ...
- javascript回车完美实现tab切换功能
javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...
- Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
随机推荐
- mysql数据字典 如何生成?
用phpMyAdmin查看表结构,点击 打印预览. &lt;img src="https://pic3.zhimg.com/50/3205ff3bd3da067528f4c1 ...
- 解决读取Excel表格中某列数据为空的问题 c#
解决同一列中“字符串”和“数字”两种格式同时存在,读取时,不能正确显示“字符串”格式的问题:set xlsconn=CreateObject("ADODB.Connection") ...
- LeetCode——8. String to Integer (atoi)
一.题目链接:https://leetcode.com/problems/string-to-integer-atoi/ 二.题目大意: 实现一个和C语言里atoi具有相同功能的函数,即能够把字符串转 ...
- 【Guava 】Collections – Join and Split
Convert Collections to String Using Joiner Convert List into String Using Joiner @Test public void w ...
- spring boot (入门简介 demo)
Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过 ...
- 点击input触发弹出框的bug
先点击第一个input建立弹出框,再点击第二个input打开弹出框,操作点击,同时触发了两个input点击事件.主要原因是建立弹出框时绑定了input1的click事件,再次触发时,又再亿次绑定了in ...
- ospf精确宣告地址
ospf的一点小问题 http://bbs.51cto.com/thread-881459-1.html 参照博客地址 network 172.20.1.0 0.0.0.3 area 0 networ ...
- 阿里云OSS图片云存储测试上传
在开发DEMO之前首先要确定 你开发OSS服务并获取了 accessKeyId和accessKeySecret final String key = MD5.Md5(DateFormat.format ...
- SCCM2012 R2实战系列之十二：解决OSD分发时间过长的问题
对于SCCM 2012 R2的初学者来说,能够成功分发操作系统可能已经是非常兴奋了.但在企业中会遇到客户提出的各种各样苛刻的需求.所以在平时实验过程中多站点客户的角度想问题,尽可能的贴近企业实际生产环 ...
- Change default network name (ens33) to old “eth0” on Ubuntu 18.04 / Ubuntu 16.04
Change default network name (ens33) to old “eth0” on Ubuntu 18.04 / Ubuntu 16.04 By Raj Last updated ...