点击图片可切换文字显隐，不刷新页面：用div包裹img和p，CSS设.caption{display:none}，JS通过classList.toggle控制.image-wrapper.show类实现流畅切换。
用HTML加少量CSS和JavaScript就能实现：点击图片时显示/隐藏文字，不刷新页面，体验流畅。
基础结构：图片+文字容器
把图片和要隐藏的文字放在同一个容器里，文字默认隐藏。结构清晰，便于控制显隐逻辑。
- 用div包裹img和p（或span）
- 给文字加一个类名（比如caption），方便CSS和JS操作
- 文字初始用display: none隐藏
CSS控制显隐样式
定义文字的隐藏状态和显示时的样式，比如位置、颜色、过渡效果等。
- 默认：.caption { display: none; }
- 可选增强：加opacity和transition让显示更柔和
- 文字可定位在图片下方或叠加在右下角，用position: relative/absolute配合调整
JavaScript响应点击切换
给图片绑定点击事件，每次点击就切换文字的显示/隐藏状态。
立即学习“前端免费学习笔记（深入）”；
- 用element.classList.toggle("show")最简洁（需配合CSS中.show { display: block; }）
- 或直接操作style.display：el.style.display = el.style.display === "none" ? "block" : "none";
- 推荐为每个图片单独写逻辑，避免全局影响；多个图片可用querySelectorAll批量绑定
完整示例代码
复制即用，支持多个图片独立控制：
<div class="image-wrapper">
<img src="photo.jpg" alt="示例图" class="toggle-img">
<p class="caption">这是隐藏的文字说明</p>
</div>
<style>
.image-wrapper { position: relative; display: inline-block; }
.caption {
display: none;
margin: 4px 0;
font-size: 14px;
color: #555;
}
.image-wrapper.show .caption { display: block; }
</style>
<script>
document.querySelectorAll('.toggle-img').forEach(img => {
img.addEventListener('click', () => {
img.closest('.image-wrapper').classList.toggle('show');
});
});
</script> 
