打开一个链接并激活一个复选框

Question

我试图创建一个元素，当单击时，它会打开一个超链接并激活一个连接到复选框的标签。元素是一个菜单项。单击该菜单项时，我希望打开锚点/链接并通过CSS关闭菜单，因此复选框。

但是，每当我将标签放在超链接中时，都会选中复选框，但不会打开超链接。

<a href="#anchor">
    <label for="checkbox">
        Menu Item
    </label>
</a>

当我将超链接放在标签内时，会发生相反的情况：链接被打开，但没有检查复选框。

<label for="checkbox">
    <a href="#anchor">
        Menu Item
    </a>
</label>

是否可以在不使用JavaScript的情况下同时激活标签并打开超链接？如果是这样，怎么样？

Answer 1

删除a元素！在标签内部的锚点或锚点内放置标签是无效的。

只需为onclick="location.hash=''"元素添加input事件即可运行代码。 （以下示例）

<input type="checkbox" id="checkbox" onclick="location.hash='#anchor';" />
<label for="checkbox">Menu Item</label>
<!-- div for margin -->
<div style="height:10000px"></div>
<a name="anchor">Lorem ipsum dolor sit amet.</a>