checked状态同步选项卡切换效果实例页面

CSS代码：

.tab-x {
    width: 50%;
    min-width: 320px;
    margin: 1em auto;
}
.tab {
    display: flex;
    text-align: center;
}
.tab-label {
    flex: 1;
    padding: 5px;
    background-color: #eee;
    border: 1px solid #ccc;
}
.tab-label + .tab-label {
    border-left: 0;
}
.tab-label.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    position: relative;
}
.tab-content:not(.active) {
    display: none;
}
.tab-content.active {
    margin-top: -1px;
    padding: 1em 2em;
    border: 1px solid #ccc;
}

HTML代码：

<div class="tab-x">
    <div class="tab">
        <label class="tab-label">选项卡1<input type="radio" id="$1" name="tab" checked hidden></label>
        <label class="tab-label">选项卡2<input type="radio" id="$2" name="tab" hidden></label>
        <label class="tab-label">选项卡3<input type="radio" id="$3" name="tab" hidden></label>
    </div>
    <div class="tab-content" for="$1">
        <p>我是选项卡1对应的美女</p>
        <img src="mm1.jpg" />
    </div>
    <div class="tab-content" for="$2">
        <p>我是选项卡2对应的美女</p>
        <img src="mm2.jpg" />
    </div>
    <div class="tab-content" for="$3">
        <p>我是选项卡3对应的美女</p>
        <img src="mm3.jpg" />
    </div>
</div>

JS代码：

<script src="smart-for.js"></script>