<!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'）是错误的，没有那个‘.’