可用HTML+JS实现图片点击显隐：推荐用CSS类配合classList.toggle()，如设.hidden{display:none}，JS调用el.classList.toggle('hidden')；或多图独立控制用toggleImg(this)；亦可语义化使用el.hidden=!el.hidden。
用HTML配合少量JavaScript就能实现图片点击后隐藏与显示的功能，不需要复杂框架。核心是通过JS切换图片元素的display样式或使用hidden属性。
基础方法：用display控制显隐
给图片添加onclick事件，点击时判断当前是否显示，然后动态修改style.display：
- 初始状态设为
display: block（默认可见） - 点击时检查
style.display === 'none'，是则设为'block'，否则设为'none' - 注意：直接读
style.display只对内联样式有效；更稳妥的方式是用getComputedStyle()或切换CSS类
推荐做法：用CSS类配合classList.toggle()
把样式交给CSS，JS只负责切换类名，更清晰、易维护：
- 写一个CSS类如
.hidden { display: none; } - 图片标签加上该类（初始隐藏）或不加（初始显示）
- JS中调用
imgElement.classList.toggle('hidden')即可一键切换 - 示例：<img src="a.jpg" onclick="this.classList.toggle('hidden')">
进阶优化：支持多张图片独立控制
如果页面有多个图片，每张都要单独控制，避免互相影响：
立即学习“前端免费学习笔记（深入）”；
- 不要用全局变量或统一ID，改用事件委托或为每个图片绑定独立函数
- 可封装成函数：function toggleImg(el) { el.classList.toggle('hidden'); }
- HTML中写：<img src="1.jpg" onclick="toggleImg(this)">
- 这样
this始终指向被点击的图片，互不干扰
补充说明：用hidden属性更语义化
HTML5原生支持hidden布尔属性，浏览器会自动设为display: none：
- JS操作：
el.hidden = !el.hidden（简洁直观） - 兼容性良好（IE11+及所有现代浏览器）
- 比手动操作
display更语义化，也便于无障碍访问
