纯 CSS 实现 tab 页切换_tab select css-优快云博客

本文介绍了一种使用 CSS 和 HTML 实现 radio/checkbox 单选或多选选项卡效果的技术。通过巧妙利用 CSS 选择器和伪类，可以实现选项卡切换时对应内容的显示与隐藏，而无需依赖 JavaScript。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：张鑫旭--CSS radio/checkbox单复选框元素显隐技术 http://www.zhangxinxu.com/wordpress/2012/01/css-css3-selector-element-display-tab-listdown/

效果图：

<div class="test_box">
    <div class="test_tab">
        <input type="radio" id="testTabRadio1" class="test_radio" name="tab" checked="checked" />
        <label class="test_label" for="testTabRadio1">选项卡1</label>
        <div class="test_tab_content">
            <p>我是选项卡1对应的美女</p>
            <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
        </div>
    </div>
    <div class="test_tab"> 
        <input type="radio" id="testTabRadio2" class="test_radio" name="tab" />
        <label class="test_label" for="testTabRadio2">选项卡2</label>
        <div class="test_tab_content">
            <p>我是选项卡2对应的美女</p>
            <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
        </div>
    </div>
    <div class="test_tab">
        <input type="radio" id="testTabRadio3" class="test_radio" name="tab" />
        <label class="test_label" for="testTabRadio3">选项卡3</label>
        <div class="test_tab_content">
            <p>我是选项卡3对应的美女</p>
            <img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
        </div>
    </div>
</div>

.test_box {
    width: 50%;
    min-height: 250px;
    margin: 1em auto;
    position: relative;
}
.test_tab {
    width: 25%;
    margin-right: -1px;
    border: 1px solid #ccc;
    border-bottom: 0;
    float: left;
}
.test_label {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #eee;
    text-align: center;
}
.test_radio,
.test_tab_content {
    position: absolute;
    left: -999em;
}
.test_radio:checked ~ .test_tab_content {
    margin-top: -1px;
    padding: 1em 2em;
    border: 1px solid #ccc;
    left: 0;
    right: 0;
}
.test_radio:checked ~ .test_label {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    position: relative;
    z-index: 1;
}