<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选项卡</title>
<style>
* {
margin: 0;
padding: 0;
}
body{
background: #83B76B;
}
#main{
width:800px;
height: 400px;
margin:50px auto;
}
#con{
width:700px;
height: 300px;
margin: 30px auto;
color: #fff;
}
input{
display: none;
}
label{
width:100px;
height: 40px;
line-height: 40px;
text-align: center;
background: #6A9E52;
display: inline-block;
}
label:nth-of-type(1){
margin-left: 50px;
}
#con .text{
background-color: #376B1F;
text-indent: 2em;
line-height: 40px;
display: none;
}
input:checked+label{ /*input被选中 找到后面的labal*/
background-color: #376B1F;
}
/*第一个input被选中，找到后面的div名字text的第一个元素*/
input:checked:nth-of-type(1)~div.text:nth-of-type(1){
display: block !important;
}
/*第二个input被选中，找到后面的div名字text的第二个元素*/
input:checked:nth-of-type(2)~div.text:nth-of-type(2){
display: block !important;
}
</style>
</head>
<body>
<div id="main">
<h1>CSS选项卡</h1>
<div id="con">
<input type="radio" name="radio" id="radio1" checked>
<label for="radio1">选项卡1</label>
<input type="radio" name="radio" id="radio2">
<label for="radio2">选项卡2</label>
<div class="text">
四月，醉一场青春的流年。慢步在四月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
</div>
<div class="text">
青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
</div>
</div>
</div>
</body>
</html>
