如何通过JavaScript实现图片的开关切换显示-html教程

使用单个按钮或两个按钮控制两张图片（如“开”和“关”状态图）的交替显示，核心在于动态切换`display`样式，并合理管理状态变量。本文提供完整可运行的解决方案，支持双按钮独立控制与单按钮切换两种模式。

在原始代码中，存在几个关键问题：

• 两张图片均设置了 display: none，且第二张图未设置 id，无法通过 JavaScript 精准控制；
• “on”按钮仅显示 #my-image，但未隐藏“off”图；“off”按钮只隐藏了 #my-image，却未显示对应关闭状态图；
• 缺乏统一的状态管理，导致逻辑耦合、难以维护。

✅ 推荐采用单状态变量 + 单按钮切换方案（更简洁、符合用户直觉），也可扩展为双按钮独立控制。以下是优化后的完整实现：

✅ 方案一：单按钮切换（推荐）

  Toggle






@@##@@

@@##@@

✅ 方案二：双按钮独立控制（兼容原结构）

若需保留“on”和“off”两个按钮（如 UI 设计要求），则应分别绑定明确行为，并确保互斥显示：