/

CSS · Tab选项卡

一个纯 CSS 实现的 Tab 选项卡

原理

通过隐藏的 input 和与之关联的 label 点击 label 触发 input 的 checked 状态触发的，再配合使用元素状态的伪类 :checked 样式就可以实现不同状态的切换，中间的过度效果还可以配合 CSS3 的 transition过度效果实现 1。

代码

  • input 的name 都一样，id不同

HTML

html
<div class="tab-frame">
  <!--标签页标题栏-->
  <!-- 设置一个为check -->
  <input type="radio" name="tab" id="tab1" check />
  <label for="tab1">TAB1</label>
  <input type="radio" name="tab" id="tab2" />
  <label for="tab2">TAB2</label>
  <input type="radio" name="tab" id="tab3" />
  <label for="tab3">TAB2</label>
  <!--Tab内容-->
  <div class="tab-content">
    <p>THIS IS TAB1 CONTENT</p>
    <p>Notice the gap between the content and tab after applying background cololr</p>
  </div>
  <div class="tab-content">
    <p>THIS IS TAB2 CONTENT</p>
    <p>Notice the gap between the content and tab after applying background cololr</p>
  </div>
  <div class="tab-content">
    <p>THIS IS TAB3 CONTENT</p>
    <p>Notice the gap between the content and tab after applying background cololr</p>
  </div>
</div>

CSS

css
/* 隐藏input和tab内容 */
.tab-frame input,
.tab-content {
  display: none;
}
/* 导航栏样式：未选中时 */
.tab-frame label {
  color: #555;
  padding: 10px 20px;
  border-bottom: 1px solid #555;
  cursor: pointer;
  float: left;
}
/* 导航栏样式：选中时 */
.tab-frame input:checked + label {
  color: #0f71aa;
  border: 1px solid #555;
  border-bottom: none;
  border-radius: 4px 4px 0px 0px;
  cursor: default;
}
/* Tab内容样式 */
.tab-frame .tab-content {
  color: #0f71aa;
  font-size: 1.5rem;
  font-weight: bold;
  padding-top: 40px;
  clear: left;
}
/* 点击的时候显示tab内容，即input checked的时候显示label*/
.tab-frame input:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tab-frame input:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.tab-frame input:nth-of-type(3):checked ~ .tab-content:nth-of-type(3) {
  display: block;
}

参考

Demo：Tabs CSS & HTML, no JS & Jquery

  1. CSS tab 选项卡 (标签页) 切换↩
%sveltekit.body%