2014-02-07 2 views
0

Я пытаюсь щелкнуть ярлык радиокнопки, выбрать этот параметр радио и использовать привязку на странице для перехода к соответствующему div.Метка метки обложки в теге привязки гиперссылки

Любой шанс, что я могу сделать это без js? Кажется, я не могу заставить его работать. Работает якорь или работает надпись.

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> 
+0

Не без JS .... – mplungjan

ответ

0

Неуверенный почему не хотите использовать JS/JQuery - код минимален. Это будет выглядеть следующим образом:

jsFiddle Demo

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

И, конечно, вы должны ссылаться на библиотеку JQuery в <head> теги, например:

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

Верстка a label элемент внутри элемента a официально не запрещен в HTML 4, bu t и его смысл не определен. Не определено, что происходит при нажатии на внутренний элемент. В HTML5 CR, a element по таким причинам определяется так, что интерактивный потомок не разрешен, а label считается интерактивным.

Наилучший подход состоит в том, чтобы различать действия, связывая их с различными элементами. Было бы плохой юзабилити иметь ярлык с переключателем, который имеет как ожидаемый эффект (переключает настройку кнопки), так и совсем другой эффект. Но невозможно предложить какое-то конкретное кодирование, так как проблема не полностью определена. Во-первых, радиокнопки обычно используются в группах, и неясно, действительно ли этот переключатель действительно является автономным.

Смежные вопросы