css实现单选选项卡

CSS实现单选选项卡可以为网页增加更多的交互体验，提高用户的使用体验。本文将介绍如何使用CSS实现单选选项卡。

/* HTML代码 */
<div class="tabs">
  <input type="radio" id="tab1" name="tabs" checked />
  <label for="tab1">选项卡1</label>
  <div class="content">选项卡1内容</div>

  <input type="radio" id="tab2" name="tabs" />
  <label for="tab2">选项卡2</label>
  <div class="content">选项卡2内容</div>

  <input type="radio" id="tab3" name="tabs" />
  <label for="tab3">选项卡3</label>
  <div class="content">选项卡3内容</div>
</div>

/* CSS代码 */
.tabs {
  display: flex;
  flex-direction: column;
}

input[type="radio"] {
  display: none;
}

label {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #999;
  border-bottom: none;
  background-color: #eee;
}

input[type="radio"]:checked + label {
  background-color: #ccc;
}

.content {
  display: none;
  padding: 10px;
  border: 1px solid #999;
  border-top: none;
}

input[type="radio"]:checked + label + .content {
  display: block;
}

首先，我们将选项卡外部的容器设置为弹性盒子，方便后续排版。

然后，我们为所有的单选框设置了display: none;，这样它们就不会显示出来。

为每个单选框后面的文本标签设置了一个cursor: pointer;，当鼠标悬停在这个标签上时可以看见一个手型光标。当单选框被选中时，它后面的标签也会变成灰色，提醒用户当前选中的选项卡是哪一个。当一个单选框被选中时，它后面的div元素会变成display: block;，显示相应的内容。

使用CSS实现单选选项卡，可以实现轻量、灵活、易于维护的选项卡效果。期待你的实践和探索！