如何不使用JavaScript实现点击切换两张图片的功能

没问题！不用JavaScript完全能实现这个点击切换两张图片的需求，我们可以借助HTML的<input type="checkbox">配合CSS的状态选择器来搞定，纯静态方案，兼容性拉满。

完整实现代码 #

<!DOCTYPE html> 
<html> 
<head> 
<title>Example</title>
<style>
/* 隐藏用来记录状态的复选框 */
.toggle-checkbox {
  display: none;
}

/* 默认状态：显示缩略图，隐藏大图 */
.cat-full {
  display: none;
}

/* 复选框被选中时：隐藏缩略图，显示大图 */
.toggle-checkbox:checked ~ label .cat-thumbnail {
  display: none;
}
.toggle-checkbox:checked ~ label .cat-full {
  display: block;
}

/* 给图片添加点击光标提示 */
img {
  cursor: pointer;
}
</style>
</head> 
<body> 
<h1>Cat image</h1>
<!-- 隐藏的复选框，用于记录切换状态 -->
<input type="checkbox" id="cat-toggle" class="toggle-checkbox">
<!-- label与复选框绑定，点击图片就会触发状态切换 -->
<label for="cat-toggle">
  <img src="cat-thumbnail.jpg" class="cat-thumbnail" alt="猫咪缩略图">
  <img src="cat-full.jpg" class="cat-full" alt="猫咪完整大图">
</label>
</body> 
</html>

核心原理说明 #

• 复选框作为状态容器：我们用一个隐藏的复选框来记录当前的切换状态（选中/未选中），它是整个切换逻辑的核心。
• label关联触发：把两张图片放在<label>标签内，并且让label的for属性和复选框的id对应，这样点击图片就相当于点击复选框，自动切换它的选中状态。
• CSS状态控制显示：通过:checked伪类选择器，我们可以根据复选框的状态来控制两张图片的显示和隐藏——未选中时显示缩略图，选中时显示大图，反之亦然。
• 交互提示：给图片添加cursor: pointer，让用户一眼就能看出这是可点击的元素，提升体验。

这个方案不需要任何JavaScript代码，完全依靠HTML和CSS的原生特性实现，在所有现代浏览器甚至一些旧浏览器上都能正常工作。

内容的提问来源于stack exchange，提问作者Flux