标签内的链接未将重点放在属性输入上

Question

我正在OnePager网站上工作，那里有一个导航菜单。 我想将radio输入与单击的a关联，以便将一些CSS应用于活动的radio 。

就像您将看到的那样，当我单击radio时，将应用CSS，但是当我单击链接时，将不应用CSS。 我知道我可以使用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>

Answer 1

正确的解决方案在这里，尝试这个。

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

Answer 2

这是标签语法的工作示例： https : //jsfiddle.net/93c3sscs/

如果您正在IE11上进行测试，或者您的客户使用IE（不确定Edge和其他IE版本），则不能依靠标签来激活输入。 IE并未将可点击功能应用于<label><input></label> ，Microsoft在2015年下半年发布了2个更新，由于将可点击区域定位在我的小部件精灵上方 5px而完全破坏了我的应用程序。

标签内的链接未将重点放在属性输入上

问题描述

2 个解决方案

解决方案1
1 2016-01-27 10:39:35

解决方案2
0 2016-03-02 20:46:12

标签内的链接未将重点放在属性输入上

问题描述

2 个解决方案

解决方案1 1 2016-01-27 10:39:35

解决方案2 0 2016-03-02 20:46:12

解决方案1
1 2016-01-27 10:39:35

解决方案2
0 2016-03-02 20:46:12