使用纯css实现选项卡效果

 1 ul>
 2     li>
 3         input type="radio" name="radio" id="tab1" checked>
 4         label for="tab1">选项一label>
 5         div class="content">内容一div>
 6     li>
 7     li>
 8         input type="radio" name="radio" id="tab2">
 9         label for="tab2">选项二label>
10         div class="content">内容二div>
11     li>
12     li>
13         input type="radio" name="radio" id="tab3">
14         label for="tab3">选项三label>
15         div class="content">内容三div>
16     li>
17     li>
18         input type="radio" name="radio" id="tab4">
19         label for="tab4">选项四label>
20         div class="content">内容四div>
21     li>
22     li>
23         input type="radio" name="radio" id="tab5">
24         label for="tab5">选项五label>
25         div class="content">内容五div>
26     li>
27 ul>

 1  2     *{
 3         margin: 0;
 4         padding: 0;
 5     }
 6     ul{
 7         position: relative;
 8         width: 500px;
 9         margin: 100px auto;
10     }
11     ul li{
12         list-style: none;
13     }
14     ul li input{
15         display: none;
16     }
17     ul li input:checked + label{
18         color: #fff;
19         background-color: red;
20     }
21     ul li label{
22         width: 100px;
23         line-height: 50px;
24         box-sizing: border-box;
25         border: 1px solid #000;
26         border-right: 0;
27         float: left;
28         text-align: center;
29     }
30     ul li:last-child label{
31         border-right: 1px solid #000;
32     }
33     ul li .content{
34         display: none;
35         position: absolute;
36         top: 50px;
37         left: 0;
38         width: 100%;
39         line-height: 500px;
40         text-align: center;
41         border: 1px solid #000;
42         border-top: 0;
43         box-sizing: border-box;
44     }
45     ul li input:checked ~ .content{
46         display: block;
47     }
48