将输入的标签包装在超链接锚标记中 [英] Wrap input's label in hyperlink anchor tag

问题描述

我试图单击单选按钮的标签，选择该单选选项，然后使用页面锚点滚动到相应的div.

I'm trying to click a radio button's label, select that radio option and use an on-page anchor to scroll to the appropriate div.

有没有机会我可以在没有js的情况下做到这一点?我似乎无法正常工作.锚或标签都可以.

Any chance I can do this without js? I can't seem to get it to work. Either the anchor works or the label works.

JSFiddle- http://jsfiddle.net/mfVJ5/

JSFiddle - http://jsfiddle.net/mfVJ5/

<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 4中没有正式禁止在a元素内嵌套label元素，但是其含义也没有明确定义.当内部元素被点击时会发生什么是不确定的.在HTML5 CR中， a元素，因此不允许交互式后代，并且label被视为交互式.

Nesting a label element inside an a element is not formally forbidden in HTML 4, but neither is its meaning well-defined. It is undefined what happens when the inner element is clicked on. In HTML5 CR, the a element is for such reasons defined so that no interactive descendant is allowed, and label counts as interactive.

最好的方法是区分动作，并将其与不同元素相关联.如果单选按钮标签同时具有预期效果(切换按钮设置)和某些完全不同的效果，则可用性将很差.但由于问题未完全定义，因此无法建议某些特定的编码.一方面，单选按钮通常是成组使用的，目前尚不清楚此单选按钮是否真的独立显示.

The best approach is to differentiate the actions, associating them with different elements. It would be poor usability to have a radio button label that has both the expected effect (toggling the button setting) and some completely different effect. But it is not possible to suggest some specific coding, since problem is incompletely defined. For one thing, radio buttons are normally used in groups, and it is unclear whether this radio button really appears as standalone.

这篇关于将输入的标签包装在超链接锚标记中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！