锚点标记不更改URL

Question

我有一些带有文本和单选按钮的锚链接。

单击文本或单选按钮时，URL应该会更改。但这并没有发生。当我单击文本或单选按钮时，单选按钮将被选中，但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>

因此，单击这两个项目中的一个时，网址应更改为www.website.com/#first-page

我尝试删除for="page-1"，并尝试删除<li>并将其替换为<a>。但没起作用。

为什么这不起作用？

Answer 1

使用a validator。

禁止嵌套交互元素(如链接和单选按钮)。

如果你想要一个链接，使用一个链接。如果要使用单选按钮，请使用单选按钮。

如果你想要一个看起来像一个单选按钮的链接，然后先停止，如果你真的想要一个UI，而不是像预期那样的UI，重新考虑一下，如果你真的想做这样的事情:用一个图像模拟单选按钮。