基于点击链接跳转至指定<input type="radio">标签页的实现疑问

需求 #

点击web_page_1的「Find out what Amy likes」链接，直接跳转至web_page_2的「pear」标签页，已知需使用锚点，但不清楚具体配置方式。

解决步骤 #

1. 配置web_page_1的跳转链接 #

将链接的href设置为web_page_2的文件路径 + 锚点#2（因为pear对应的单选框ID为2）：

<!-- web_page_1 修正后代码 -->
<a href="web_page_2.html#2">
   <h1>Find out what Amy likes</h1>
</a>

提示：若两个页面不在同一目录，根据实际路径调整前缀（例如./subdir/web_page_2.html#2）

2. 修复web_page_2的HTML结构 #

你提供的代码存在标签未闭合问题，会导致DOM结构异常，修正为完整结构：

<!-- web_page_2 修正后代码 -->
<section id="page-tabs">
  <div class="page_tabs_container">
    <!-- Apple 标签组 -->
    <input type="radio" name="tab" id="1" checked />
    <label for="1">
      <div class="tab-name">Apple</div>
    </label>
    <div class="tab-content">
      <!-- Apple 标签内容 -->
    </div>

    <!-- pear 标签组 -->
    <input type="radio" name="tab" id="2" />
    <label for="2">
      <div class="tab-name">pear</div>
    </label>
    <div class="tab-content">
      <!-- pear 标签内容 -->
    </div>

    <!-- banana 标签组 -->
    <input type="radio" name="tab" id="3" />
    <label for="3">
      <div class="tab-name">banana</div>
    </label>
    <div class="tab-content">
      <!-- banana 标签内容 -->
    </div>
  </div>
</section>

3. 添加JS确保锚点跳转后激活标签 #

仅靠锚点只会滚动到目标元素位置，不会自动选中单选框，需在web_page_2中添加以下JS：

// 放在web_page_2的页面底部，或包裹在DOM加载完成事件中
document.addEventListener('DOMContentLoaded', () => {
  const targetId = window.location.hash;
  if (targetId) {
    const radio = document.querySelector(targetId);
    if (radio && radio.type === 'radio') {
      radio.checked = true;
    }
  }
});

原理说明 #

• 锚点#2指向web_page_2中ID为2的单选框元素
• JS代码在页面加载时检测URL锚点，自动将对应单选框设为选中状态，触发你现有CSS中基于:checked的标签切换逻辑（控制.tab-content的显示/隐藏）

内容的提问来源于stack exchange，提问作者gaoyu