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>