本文将介绍如何使用 JavaScript 实现点击按钮显示图片和描述，并在点击新按钮时关闭之前显示的图片和描述。正如摘要中所述，我们将通过 CSS 控制元素的显示与隐藏，利用 JavaScript 动态添加和移除 CSS 类，实现元素的切换显示效果，从而达到每次只显示一个图片及其描述的目的。
实现原理
核心思路在于：
- CSS 控制显示与隐藏: 默认情况下，图片容器和描述都处于隐藏状态。当需要显示时，通过添加特定的 CSS 类来改变其 display 属性。
- JavaScript 动态切换 CSS 类: 通过 JavaScript 监听按钮的点击事件，在点击事件处理函数中，首先移除所有已显示的图片容器的显示类，然后为当前点击的按钮对应的图片容器添加显示类。
代码实现
以下是一个完整的 HTML 示例代码，展示了如何实现该功能：
Image Description
@@##@@
Description for Image 1
@@##@@
Description for Image 2
@@##@@
Description for Image 3
代码解释
- HTML 结构: 包含多个按钮，每个按钮对应一个 div 元素，该 div 元素包含一个 img 标签和一个 description 的 div 元素。
- CSS 样式: .image-container 和 .description 默认 display: none;，.image-container.active 和 .description.active 设置 display: block;，用于控制元素的显示与隐藏。
-
JavaScript 函数 toggleImageDescription(imageId):
- 接收一个 imageId 参数，表示要显示的图片容器的 ID。
- 首先，使用 document.querySelectorAll(".image-container.active") 获取所有已经激活的图片容器。
- 然后，遍历这些容器，移除它们的 active 类，以及它们内部的 .description 元素的 active 类，从而关闭之前显示的图片和描述。
- 最后，为当前点击的按钮对应的图片容器和描述添加 active 类，使其显示。
注意事项
- 确保 image1.jpg, image2.jpg, image3.jpg 等图片文件存在，并且路径正确。
- 可以根据需要修改 CSS 样式，调整图片和描述的显示效果。
- 可以扩展此代码，实现更复杂的功能，例如添加动画效果，或者从服务器动态加载图片和描述。
- 为了更好的用户体验，可以考虑添加错误处理机制，例如当图片加载失败时显示默认图片或错误信息。
总结
通过以上步骤，我们成功地实现了一个点击按钮显示图片和描述，并在点击新按钮时关闭之前显示的图片和描述的功能。这个例子展示了如何利用 CSS 控制元素的显示与隐藏，以及如何使用 JavaScript 动态操作 CSS 类，实现元素的切换显示效果。 这种方法可以应用于各种需要动态显示和隐藏内容的场景，例如选项卡、手风琴效果等。
