Ссылка внутри Ярлык не устанавливает фокус на атрибутном входе

Я работаю над сайтом One Pager, где у меня есть меню навигации. Я хотел бы иметь вход radio, связанный с нажатым a, чтобы применить CSS к активному radio.Ссылка внутри Ярлык не устанавливает фокус на атрибутном входе

Как вы увидите, CSS применяется, когда я нажимаю на radio, но не тогда, когда я нажимаю на ссылку. Я знаю, что могу сделать это с помощью JavaScript, но я стараюсь избегать роста моей базы кода.

Второй раздел фрагмента - это то, чего я хотел бы достичь, но с тегом a в label. radio будет скрыт, поэтому нажатие на radio не является приемлемым ответом. Как я могу сделать тег aи активировать тег input?

input[type=radio]:checked + label { 
 
     color:red; 
 
     background-color:green; 
 
    } 
 
    .working { 
 
     visibility: hidden; 
 
     width:0; 
 
    }

<html> 
 
    <body> 
 
     <div> 
 
      <h2>Not working with a tag</h2> 
 
      <div> 
 
       <input id="a" type="radio" name="menu1" value="a"/> 
 
       <label for="a"><a href="#">Input 1</a></label> 
 
      </div> 
 
      <div> 
 
       <input id="b" type="radio" name="menu1" value="b"/> 
 
       <label for="b"><a href="#">Input 2</a></label> 
 
      </div> 
 
     </div> 
 
     <div> 
 
      <h2>Expected result (without a, it doesn't work)</h2> 
 
      <div> 
 
       <input class="working" id="c" type="radio" name="menu2" value="a"/> 
 
       <label for="c">Input 1</label> 
 
      </div> 
 
      <div> 
 
       <input class="working" id="d" type="radio" name="menu2" value="b"/> 
 
       <label for="d">Input 2</label> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

источник

2016-01-26 TopinFrassi

Правильным решением здесь, попробуйте это.

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('[name=title_format]').click(function() { 
     $('[name=doc-title]').val('Title changed to '+$(this).val()); 
    }); 
}); 
</script> 

<style> 
input[type=radio]:checked + label { 
    color:red; 
    background-color:green; 
} 
.working { 
    width:0; 
} 
</style> 

<div> 
    <h2>Not working with a tag</h2> 
    <div> 
     <a href="#"> 
     <input type="radio" name="title_format" class="title-format" id="title-format-0" value="0" checked="checked">    <label for="title-format-0">Input 1</label> 
     </a> 
    </div> 
    <div> 
     <a href="#"> 
     <input type="radio" name="title_format" class="title-format" id="title-format-1" value="1"> 
     <label for="title-format-1">Input 2</label> 
     </a> 
    </div> 
</div> 
<div> 
    <h2>Expected result (without a, it doesn't work)</h2> 
    <div> 
     <input class="working" id="c" type="radio" name="menu2" value="a"/> 
     <label for="c">Input 1</label> 
    </div> 
    <div> 
     <input class="working" id="d" type="radio" name="menu2" value="b"/> 
     <label for="d">Input 2</label> 
    </div> 
</div>

источник

2016-01-27 10:39:35

Я выше, потому что я думал, что это сработало, но оно не работает. Он меняет стиль, но навигация для '' не работает. – TopinFrassi

Вот рабочий пример синтаксиса этикетки: https://jsfiddle.net/93c3sscs/

Если вы тестируете на IE11 или ваши клиентах использовать IE (не уверен, Край и другие версии IE), вы не можете полагаться на метки для активации входов. IE не применяет интерактивную функциональность до <label><input></label>, а Microsoft выпустила 2 обновления во второй половине 2015 года, которые полностью сломали мое приложение из-за этого, разместив область с интерактивным доступом 5px выше моих спрайтов виджета.

источник

2016-03-02 20:46:12 Escher

Ссылка внутри Ярлык не устанавливает фокус на атрибутном входе

ответ

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