复选框标签内的a-tag

Question

我的标签内部有一个链接，其中包含复选框input-element的for-attribute：

<li>
    <label for="tab2-btn">
        <a class="menu_link" href="#the-tab-bar">Payment</a>
    </label>
</li>

[...]

<div class="tabBar" id="the-tab-bar">
   <input type="radio" name="tab" id="tab2-btn">
[...]
</div>

a-Tag按预期链接到特定的dom元素（跳转到id为“the-tab-bar”的div），但标签不起作用，意味着ID为“tab2-btn”的复选框赢了不检查。

Answer 1

如果您不能（或者由于某种原因不想）使用JavaScript / jQuery，您可以使用伪选择器:target，并使用属性{{1预先检查单选按钮（和每个checked不同）。这假设你只想一次出现一个单选按钮。如果这是一个表单，那么我不会建议这条路线并推荐JavaScript / jQuery。

段

name

#tab1-btn:target,
#tab2-btn:target,
#tab3-btn:target {
  display: block
}
.tabBar label {
  display: none;
}