使用纯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 <style>
 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 </style>