一键激活标签和链接

Question

我想一键激活标签和链接，因为我的菜单使用链接并移动到页面的正确点，但标签必须激活按钮，使内容放大并关闭菜单。我试过了：

<label for="thebutton"><a href="#boxwithcontent">Click me</a></label>

但这只会激活链接或标签（如果标签区域更大）。明白我的意思。

可能最困难的问题是我不想使用 jquery。

我认为一种可能性是通过单选按钮控制滚动或通过链接控制单选按钮，但我找不到任何方法可以做到这一点。

感谢您的任何努力

提姆

Answer 1

我可能误解了你的意图，但你可以尝试这样的事情。

使用您的 HTML 进行快速编辑;

<label for="magicbutton">Click Me</label>
<input id="magicbutton" type="checkbox" onclick='window.location.assign("#field")'/>
<div id="field"><p>
magic text
</p></div>

以及您的 CSS 与快速编辑;

#field{
    display:none;
    position:absolute;
    top:100%;
}
input {float: left;}
input#magicbutton:checked ~ #field{
    display:block;
}

。和小提琴 https://jsfiddle.net/L2ywu2ta/

我没有太大变化，希望有帮助。干杯。

Answer 2

从技术上讲，它不是一个链接，但通过一些样式，它可能归结为相同：

<form action="#boxwithcontent" method="get">
  <label>test<button type="submit">Click me</button></label>
</form>

如果您有其中的几个，则可以使用一个窗体，并使用按钮上的formaction属性...