css3写tab切换

浏览数：28 / 时间：2015年06月09日

转自：http://code.hcharts.cn/about.html 
1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 7 <title>title</title>
 8 <meta name="description" content="">
 9 <meta name="keywords" content="">
10 <style type="text/css">
11 *, *:after, *:before{box-sizing:border-box;-webkit-box-sizing:border-box;}
12 .wrapper{width: 80em;margin: 0px auto}
13 .tabs-section [type="radio"]{display:none;}
14 .tabs-section [type="radio"] + label{display: inline-block; position: relative;color: #777;padding: .5em 1em; left: 6px;}
15 .tabs-section [type="radio"] + label:after{background-color: #fff;border:1px solid #999;border-bottom: none; display: block; width: 100%;height: 100%;content:‘‘; position: absolute; top: 0px;border-radius: .5em .5em 0 0; transform:perspective(100px) rotateX(30deg); background-color: #f0f0f0; left: 0px}
16 
17 .tabs-section [type="radio"]:checked + label:after{background-color: #fff; z-index: 4}
18 
19 .tabs-section [type="radio"] + label span{position: relative; cursor: pointer; z-index:5}
20 .tabs-section [type="radio"]:checked + label span{}
21 
22 .tabs-content{border:1px solid #999; border-top:none; height: 32em; position: relative; overflow: hidden; box-shadow:0 -1px 0 #222; border-radius:0 0 .2em .2em}
23 .tabs-section section{z-index: 0; position: absolute; height: 100%; transition:all .4s ease; top: 0px;left: 0px; width: 100%; padding: 2em; visibility: hidden;}
24 
25 
26 .tabs-section [type="radio"]:nth-of-type(1):checked ~ .tabs-content section:nth-child(1){visibility: visible;}
27 .tabs-section [type="radio"]:nth-of-type(2):checked ~ .tabs-content section:nth-child(2){visibility: visible;}
28 .tabs-section [type="radio"]:nth-of-type(3):checked ~ .tabs-content section:nth-child(3){visibility: visible;}
29 .tabs-section [type="radio"]:nth-of-type(4):checked ~ .tabs-content section:nth-child(4){visibility: visible;}
30 </style>
31 </head>
32 <body>
33 
34 <div class="wrapper">
35 <div class="tabs-section">
36 <div class="tabs-wrapper">
37 <input type="radio" name="tab" id="about" checked="checked"/>
38 <label for="about"><span>About</span>
39 </label>
40 <input type="radio" name="tab" id="usage"/>
41 <label for="usage"><span>How to use</span>
42 </label>
43 <input type="radio" name="tab" id="cdn" />
44 <label for="cdn"><span>CDN Files</span>
45 </label>
46 <input type="radio" name="tab" id="changelog" />
47 <label for="changelog"><span>Change log</span>
48 </label>
49 
50 <div class="tabs-content">
51 <section>About</section>
52 <section>How to use</section>
53 <section>CDN Files</section>
54 <section>Change log</section>
55 </div>
56 </div>
57 </div>
58 
59 </div>
60 </body>
61 </html>