我有 10 张图片我想在点击时切换/显示隐藏
我已经通过 CSS 切换了一张图片，但我无法让它与多张图片一起使用，因为标签元素很常见。我尝试将标签元素更改为 label1，但它不起作用，我还尝试向标签添加一个类，但无法使其正常工作。
第二张图片显示了树的选中/未选中图像是我想要为我拥有的所有 10 张图像实现的。
我不确定我可以用 CSS 做什么？有什么想法，如果没有，我需要在 jquery 上做什么？任何帮助将不胜感激谢谢
这是我的代码:
#golf {
display: none;
}
label {
display: inline-block;
width: 50px;
height: 50px;
cursor: pointer;
background-image: url(https://www.thatsinsurance.com/golfunselected.png);
}
#golf:checked+label {
background-image: url(https://www.thatsinsurance.com/golfselected.png);
}
#naturaldisaster {
display: none;
}
label {
display: inline-block;
width: 50px;
height: 50px;
cursor: pointer;
background-image: url(https://www.thatsinsurance.com/naturaldisasterunselected.png);
}
#naturaldisaster:checked+label {
background-image: url(https://www.thatsinsurance.com/naturaldisasterselected.png);
}<body>
<p><input type="checkbox" id="golf" /><label for="golf"></label>
</p>
<p><input type="checkbox" id="naturaldisaster" /><label for="naturaldisaster"></label>
</p>
</body>最佳答案
对于 css，你可以使用这样的东西:
label{
display: inline-block;
width: 50px;
height: 50px;
cursor: pointer;
}
input[type='checkbox'] {
display:none;
}
#naturaldisaster + label {
background-image: url(https://www.thatsinsurance.com/naturaldisasterunselected.png);
}
#naturaldisaster:checked + label {
background-image: url(https://www.thatsinsurance.com/naturaldisasterselected.png);
}
您需要对每张照片都这样做。
关于jquery - 切换多个图像显示/隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46709175/