包含单选按钮的锚点标签点击后URL未变更问题咨询

先看看你给出的代码：

<ul> 
  <li> 
    <a href="#page-1"> 
      <label for="page-1">Page 1</label> 
      <input type="radio" id="page-1" name="page" /> 
    </a> 
  </li> 
  <li> 
    <a href="#page-2"> 
      <label for="page-2">Page 2</label> 
      <input type="radio" id="page-2" name="page" /> 
    </a> 
  </li> 
</ul>

问题的核心在于：当单选按钮（radio）被包裹在<a>标签内时，点击radio会触发它自身的默认选中行为，这个行为会阻止<a>标签的跳转默认动作。浏览器处理这类交互事件时，表单控件的事件优先级更高，会中断锚点链接的跳转逻辑，所以你只能看到单选按钮被选中，但URL的哈希值不会变化。

你尝试的两种方法之所以没用，原因如下：

• 移除label的for属性：只是切断了label和radio的关联，但点击radio本身依然会触发它的选中逻辑，还是会阻止<a>的跳转。
• 把<li>换成<a>：只是改变了列表项的结构，radio在<a>内部的问题并没有解决，点击radio还是会中断跳转。

这里给你两个可行的解决方案：

方案1：用JavaScript手动控制哈希值跳转 #

给每个radio添加点击事件，手动修改页面的哈希值，这样既可以选中单选按钮，又能更新URL：

<ul>
  <li>
    <label for="page-1">Page 1</label>
    <input type="radio" id="page-1" name="page" onclick="window.location.hash = 'page-1'"/>
  </li>
  <li>
    <label for="page-2">Page 2</label>
    <input type="radio" id="page-2" name="page" onclick="window.location.hash = 'page-2'"/>
  </li>
</ul>

方案2：调整HTML结构，分离radio和锚点链接 #

把radio放在<a>外面，让label和锚点关联，这样点击label或<a>都会触发跳转，同时radio也能正常选中：

<ul>
  <li>
    <input type="radio" id="page-1" name="page" />
    <a href="#page-1">
      <label for="page-1">Page 1</label>
    </a>
  </li>
  <li>
    <input type="radio" id="page-2" name="page" />
    <a href="#page-2">
      <label for="page-2">Page 2</label>
    </a>
  </li>
</ul>

如果需要点击radio也能触发跳转，还是要搭配方案1的JS逻辑哦。

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