Question

我正在尝试单击单选按钮的标签，选择该单选按钮并使用页面上的锚点滚动到相应的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>

Answer 1

在HTML 4中没有正式禁止在label元素中嵌套a元素，但它的含义也没有明确定义。未定义单击内部元素时会发生什么。在HTML5 CR中，a element是出于这样的原因而定义的，因此不允许使用交互式后代，label计为交互式。

最好的方法是区分行动，将它们与不同的元素联系起来。如果单选按钮标签具有预期效果（切换按钮设置）和一些完全不同的效果，那么可用性就会很差。但由于问题未完全定义，因此无法建议某些特定的编码。一方面，单选按钮通常用于组，目前还不清楚这个单选按钮是否真的独立显示。

Answer 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>

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

2 个答案: