本文介绍使用原生 javascript 实现点击 html 元素（如导航项或下拉标题）后，为指定区域动态设置背景图片的方法，无需框架依赖，兼容多实例场景，适合教学类网页开发。
在制作“无人机工作原理”这类科普网页时，常需增强交互性与视觉关联性——例如用户点击“Radio（无线电）”标题时，对应内容区自动显示无线电波形图作为背景。这种效果完全可通过原生 JavaScript 实现，无需引入 Java 或复杂框架（注意：Java ≠ JavaScript，此处应为 JS）。
核心思路是：为每个可点击元素绑定 onclick 事件，传入唯一标识符（如 'radio'），再通过 JavaScript 动态修改目标容器的 backgroundImage 样式属性。
以下为完整、可复用的实现方案：
✅ 正确的 HTML 结构（含语义化与可维护性）
A radio wave is a portion of the electromagnetic spectrum at lower frequencies than microwaves. The wavelengths of radio waves range from thousands of meters to 30 cm.
✅ 对应的 JavaScript 逻辑（支持 7+ 实例）
⚠️ 关键注意事项
- 路径务必正确：确保 images/radio-wave-bg.png 等文件真实存在于项目目录中；推荐使用相对路径而非绝对 URL。
-
ID 命名一致性：每个 的 onclick="backgroundChange('xxx')" 必须与对应 中的 xxx 完全一致（区分大小写）。
- 样式覆盖问题：若原有 CSS 已定义 background，请在 JS 中统一设置 background（而不仅是 backgroundImage），或在 CSS 中使用 !important（不推荐）；更佳实践是移除冗余背景声明，交由 JS 全权控制。
- 无障碍与语义优化：可进一步添加 aria-expanded 和键盘支持（如 Enter/Space 触发），但对 DT 课程基础项目非必需。
此方案轻量、直观、可扩展性强——只需新增一个菜单项和一条 imageUrls 映射，即可支持第七个甚至更多背景切换场景，完美契合你的课程需求。
