在某些场景下不能使用 js，如富文本编辑器中的动态 html 代码，这时可以通过 input 与 label 实现交互效果。

原理

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label

• label 元素表示用户界面中某个元素的说明，通过 for 属性，关联 input 的 id。
• 可以点击关联的 label 来聚焦或者激活这个输入元素，就像直接点击关联的 input 一样。

html 结构

顶部使用 label 控制下方每个面板中的 input 。

<div class="tab-wrapper">
    <label for="tab1">tab1</label>
    <label for="tab2">tab2</label>
    <label for="tab3">tab3</label>
</div>
<div class="pane-wrapper">
    <input type="radio" name="tab" id="tab1" value="tab1" checked>
    <div class="pane">
        tab1
    </div>
    
    <input type="radio" name="tab" id="tab2" value="tab2">
    <div class="pane">
        tab2
    </div>

    <input type="radio" name="tab" id="tab3" value="tab3">
    <div class="pane">
        tab3
    </div>
</div>

css 控制

默认面板隐藏，input 单选框隐藏。

默认第一个 checked，通过点击事件可改变 input 的 checked 状态，再配合 css 加号选择去控制当前选择节点的下一个节点进行展示。

.tab-wrapper {
    display: flex;
}

.tab-wrapper label {
    display: block;
    margin-right: 20px;
    cursor: pointer;
}

.pane-wrapper input[type="radio"],
.pane-wrapper .pane {
    display: none;
}

.pane-wrapper>input[type="radio"]:checked+.pane {
    display: block;
    border: 1px solid lightblue;
    width: 200px;
    height: 200px;
    margin-top: 10px;
}