如何实现点击HTML下拉菜单时切换背景？无人机网页开发求助

1. 修正HTML结构并添加背景关联属性 #

先修复代码中的标签错误，同时为每个折叠面板标题添加data-bg属性，用来绑定对应主题的背景图片路径：

<div class="docs-accordion-group accGroup">
  <div class="docs-accordion__title accTitle">
    <span class="accordion__arr"></span>
    <!-- 替换url内的路径为你的无线电背景图实际地址 -->
    <a href="javascript:void(0)" class="docs-accordion__link" style="font-weight: 700" data-bg="url('radio-wave-bg.jpg')">
      Radio
    </a>
  </div>
  <div class="docs-accordion__panel accordion__panel accPanel">
    <div class="para" style="font: arial">
      <p>A radio wave from the portion of the electromagnetic spectrum at lower frequencies than microwaves. The wavelengths of radio waves range from thousands of metres to 30 cm.</p>
    </div>
  </div>
</div>

其他6个折叠面板重复此结构，仅修改data-bg的图片路径和标题文字即可。

2. 添加JavaScript实现背景切换 #

在页面底部（</body>标签前）插入以下代码，监听点击事件并切换页面背景：

// 获取所有折叠面板的触发链接
const accordionLinks = document.querySelectorAll('.docs-accordion__link');

// 批量绑定点击事件
accordionLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    
    // 从属性中取出对应背景图路径
    const targetBg = this.getAttribute('data-bg');
    
    // 应用到页面body
    document.body.style.backgroundImage = targetBg;
    
    // 可选：同时控制折叠面板的展开/收起
    const panel = this.closest('.docs-accordion-group').querySelector('.accPanel');
    panel.classList.toggle('active');
  });
});

3. 优化背景显示效果（可选） #

添加CSS让背景图片显示更美观：

body {
  background-size: cover; /* 覆盖整个页面 */
  background-position: center; /* 居中对齐 */
  background-repeat: no-repeat; /* 禁止平铺 */
  transition: background-image 0.3s ease; /* 添加平滑过渡动画 */
}

/* 折叠面板展开状态样式（根据你的需求调整） */
.accPanel.active {
  display: block;
}

核心逻辑说明 #

• 用data-bg属性实现面板与背景图的关联，避免重复编写多个函数，适配7次复用的场景
• 通过批量事件监听简化代码，无需为每个面板单独绑定函数
• 平滑过渡效果提升交互体验

内容的提问来源于stack exchange，提问作者Anon