html - 复选框标签内的标签

Question

我的标签内有一个链接，其中包含复选框输入元素的 for 属性:

<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 并使用属性 checked(每个都有不同的 name)。这是假设您只想一次出现一个单选按钮。如果这是一个表单，那么我不会建议这条路线并推荐 JavaScript/jQuery。

片段

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

<ul>
  <li>
    <label for="tab1-btn">
      <a class="menu_link" href="#tab1-btn">Payment 1</a>
    </label>
  </li>
  <li>
    <label for="tab2-btn">
      <a class="menu_link" href="#tab2-btn">Payment 2</a>
    </label>
  </li>
  <li>
    <label for="tab3-btn">
      <a class="menu_link" href="#tab3-btn">Payment 3</a>
    </label>
  </li>
</ul>

<div class="tabBar" id="the-tab-bar">
  <label for="tab1-btn" id="tab1-btn">
    <input type="radio" name="tab1" checked>Payment 1</label>
  <label for="tab2-btn" id="tab2-btn">
    <input type="radio" name="tab2" checked>Payment 2</label>
  <label for="tab3-btn" id="tab3-btn">
    <input type="radio" name="tab3" checked>Payment 3</label>
</div>