html – 仅使用CSS切换收音机输入
发布时间:2020-12-14 22:22:45 所属栏目:资源 来源:网络整理
导读:以下代码使用脚本在第二次单击时切换/取消选中收音机。 我的问题是如何使用CSS? (function(lastimg) { document.querySelector("#img-select").addEventListener('click',function(e){ if (e.target.tagName.toLowerCase() == 'input') { if (lastimg == e.
以下代码使用脚本在第二次单击时切换/取消选中收音机。
我的问题是如何使用CSS? (function(lastimg) { document.querySelector("#img-select").addEventListener('click',function(e){ if (e.target.tagName.toLowerCase() == 'input') { if (lastimg == e.target) { e.target.checked = false; lastimg = null; } else { lastimg = e.target; } } }); }()); .container { display: flex; flex-wrap: wrap; max-width: 660px; } .container > label { flex: 1; flex-basis: 33.333%; } .container > div { flex: 1; flex-basis: 100%; } .container label img { display: block; margin: 0 auto; } .container input,.container input ~ div { display: none; padding: 10px; } .container #img1:checked ~ #img1txt,.container #img2:checked ~ #img2txt,.container #img3:checked ~ #img3txt,.container #img4:checked ~ #img4txt { display: block; } <div id="img-select" class="container"> <input id="img1" type="radio" name="img-descr"> <input id="img2" type="radio" name="img-descr"> <input id="img3" type="radio" name="img-descr"> <label for="img1"> <img src="http://lorempixel.com/200/200/food/1/" alt=""> </label> <label for="img2"> <img src="http://lorempixel.com/200/200/food/6/" alt=""> </label> <label for="img3"> <img src="http://lorempixel.com/200/200/food/8/" alt=""> </label> <div id="img1txt"> <div>Recipe nr 1</div> </div> <div id="img2txt"> <div>Recipe nr 2</div> </div> <div id="img3txt"> <div>Recipe nr 3</div> </div> </div> 编辑 我需要一个跨浏览器解决方案,在主要浏览器上工作,没有脚本,只是CSS。 为了澄清,我希望它作为一个正常的无线电输入工作,但如果点击两次,或反复,同样的,它应该切换自己作为复选框输入。 只要布局结构保持不变,我们也可以改变标记更改,如果可以断开行,则页面可以有3个以上的配方。 编辑2 问题的主要焦点是如何使无线电输入可以进行切换,但是由于几个答案显示了使用纯CSS切换状态的其他方法,因此欢迎任何此类技巧。 解决方法
您不能使用CSS更改单选按钮的功能。 CSS仅用于视觉变化。
也就是说,你可以用一个聪明的黑客来模拟这个行为。对于您的示例,我建议使用CSS来直观地替换当前选定的单选按钮的标签,并将虚拟标签附加到表示“空白”或“空”选择的另一个单选按钮。这样,点击虚拟标签将选择“空白”选项,有效地清除您的先前选择: .container { display: flex; flex-wrap: wrap; max-width: 660px; } .container > label { flex: 1; flex-basis: 33.333%; } .container > div { flex: 1; flex-basis: 100%; } .container label img { display: block; margin: 0 auto; } .container input,.container #img3:checked ~ #img3txt { display: block; } .container label[for=noimg] { display: none; } .container #img1:checked ~ label[for=img1],.container #img2:checked ~ label[for=img2],.container #img3:checked ~ label[for=img3] { display: none; } .container #img1:checked ~ label[for=img1] + label[for=noimg],.container #img2:checked ~ label[for=img2] + label[for=noimg],.container #img3:checked ~ label[for=img3] + label[for=noimg] { display: block; } <div id="img-select" class="container"> <input id="noimg" type="radio" name="img-descr"> <input id="img1" type="radio" name="img-descr"> <input id="img2" type="radio" name="img-descr"> <input id="img3" type="radio" name="img-descr"> <label for="img1"> <img src="http://lorempixel.com/200/200/food/1/" alt=""> </label> <label for="noimg"> <img src="http://lorempixel.com/200/200/food/1/" alt=""> </label> <label for="img2"> <img src="http://lorempixel.com/200/200/food/6/" alt=""> </label> <label for="noimg"> <img src="http://lorempixel.com/200/200/food/6/" alt=""> </label> <label for="img3"> <img src="http://lorempixel.com/200/200/food/8/" alt=""> </label> <label for="noimg"> <img src="http://lorempixel.com/200/200/food/8/" alt=""> </label> <div id="img1txt"> <div>Recipe nr 1</div> </div> <div id="img2txt"> <div>Recipe nr 2</div> </div> <div id="img3txt"> <div>Recipe nr 3</div> </div> </div> (View in JSFiddle) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |