首页 > 代码库 > css3写tab切换

css3写tab切换

2024-11-14 12:20:39   203人阅读

转自：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>

 

css3写tab切换


联系
我们