用radio和ul弄出来的选项卡

.tabs [id^="tab"]:checked + label {
  top: 0;
  padding-top: 17px;
  background: #000000;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}
////////////////////////////////////////另一种/////////////////////////////////////
.tabs>.content1:checked~ul>.content1,
.tabs>.content2:checked~ul>.content2,
.tabs>.content3:checked~ul>.content3,
.tabs>.content4:checked~ul>.content4 {
opacity: 1;
visibility: visible;
-webkit-transform: none;
-ms-transform: none;
transform: none
}

<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">选项卡 1</label>
<div id="tab-content1" class="tab-content">
<p>选项卡内容 1</p>
</div>
</li>
 
<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">选项卡 2</label>
<div id="tab-content2" class="tab-content">
<p>选项卡内容 2</p>
</div>
</li>
</ul>