标签内的链接未将重点放在属性输入上
[英]Link within Label doesn't set focus on attributed input
问题描述
I'm working on a One Pager website where I have a navigation menu. 
我正在OnePager网站上工作，那里有一个导航菜单。 I'd want to have radio input associated to the clicked a , in order to apply some CSS to the active radio . 我想将radio输入与单击的a关联，以便将一些CSS应用于活动的radio 。
As you will see, the CSS is applied when I click on the radio , but not when I click on the link. 就像您将看到的那样，当我单击radio时，将应用CSS，但是当我单击链接时，将不应用CSS。 I know I could do this using JavaScript, but I am trying to avoid growing my code base. 我知道我可以使用JavaScript来做到这一点，但我试图避免增加我的代码库。
The second section of the snippet is what I'd want to achieve, but with an a tag in the label . 该段的第二部分是我想达到的目标，但有a在标签label 。 The radio will be hidden, so clicking on the radio isn't an acceptable answer. radio将被隐藏，因此单击radio不是可接受的答案。 How can I make the a tag and the input tag activate? 我怎样才能让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>
2 个解决方案
解决方案1
1 2016-01-27 10:39:35
Right solution is here , try this. 正确的解决方案在这里，尝试这个。
<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>
解决方案2
0 2016-03-02 20:46:12
Here's a working example of the label syntax: https://jsfiddle.net/93c3sscs/ 这是标签语法的工作示例： https : //jsfiddle.net/93c3sscs/
If you're testing on IE11 or your customers use IE (not sure about Edge and other IE versions), you can't rely on labels to activate inputs. 如果您正在IE11上进行测试，或者您的客户使用IE（不确定Edge和其他IE版本），则不能依靠标签来激活输入。 IE does not apply clickable functionality to <label><input></label> , and Microsoft put out 2 updates in the second half of 2015 that completely broke my app because of this by positioning the clickable area 5px above my widget sprites. IE并未将可点击功能应用于<label><input></label> ，Microsoft在2015年下半年发布了2个更新，由于将可点击区域定位在我的小部件精灵上方 5px而完全破坏了我的应用程序。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.