gpt4 book ai didi

html - 标签内的链接不会将焦点设置在属性输入上

转载 作者:太空宇宙 更新时间:2023-11-04 10:50:33 25 4
gpt4 key购买 nike

我在一个有导航菜单的单页机网站上工作。我想要将 radio 输入关联到单击的 a,以便将一些 CSS 应用于事件的 radio

如您所见,当我点击 radio 时应用 CSS,但当我点击链接时则不会。我知道我可以使用 JavaScript 来做到这一点,但我正在努力避免增加我的代码库。

代码片段的第二部分是我想要实现的,但在 label 中有一个 a 标记。 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>

最佳答案

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

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

关于html - 标签内的链接不会将焦点设置在属性输入上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35025490/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com