将输入的标签包装在超链接锚标记中答案

【问题标题】：Wrap input's label in hyperlink anchor tag将输入的标签包装在超链接锚标记中
【发布时间】：2014-02-07 18:44:15
【问题描述】：

我正在尝试单击单选按钮的标签，选择该单选选项并使用页面锚点滚动到相应的 div。

没有js我可以做到这一点吗？我似乎无法让它工作。锚点有效或标签有效。

<input type="radio" name="name" id="name" value="1" class="name">
<a href="#gosomewhere" class="btn">
  <label for="name">
    Click to Select Option
  </label>
</a>

<div id="gosomewhere">And I'm here.</div>

【问题讨论】：

标签： html css input label

【解决方案1】：

在a 元素中嵌套label 元素在HTML 4 中并未正式禁止，但其含义也没有明确定义。未定义单击内部元素时会发生什么。在 HTML5 CR 中，a element 被定义为不允许交互式后代，label 被视为交互式。

最好的方法是区分动作，将它们与不同的元素相关联。具有预期效果（切换按钮设置）和一些完全不同的效果的单选按钮标签的可用性会很差。但是不可能提出一些具体的编码，因为问题没有完全定义。一方面，单选按钮通常是成组使用的，目前还不清楚这个单选按钮是否真的以独立的形式出现。

【讨论】：

【解决方案2】：

不确定为什么不希望使用 js/jQuery - 代码很少。它看起来像这样：

jsFiddle Demo

$(function() {
    $('#name').click(function() {
        $('html, body').animate({scrollTop:$('#gosomewhere').offset().top}, 500);
    });
});

当然，你必须在<head>标签中引用jQuery库，像这样：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

【讨论】：