CSS radio单选框下的选项卡切换效果实例页面

展示

代码

CSS代码：

.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;
}
            

HTML代码：

<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="//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="//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="//image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
        </div>
    </div>
</div>