CSS · Tab选项卡

一个纯 CSS 实现的 Tab 选项卡

原理

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

代码

  • inputname 都一样,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

%sveltekit.body%