使用纯css实现选项卡效果
html部分：
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>
css部分：
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>
