Question

我正在One Pager网站上工作，我有一个导航菜单。我希望将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>，并且微软在2015年下半年发布了2个更新，完全破坏了我的应用程序，因为通过将可点击区域定位在5px 上面我的小部件精灵

Label中的链接不会将重点放在属性输入上

2 个答案: