JavaScript实现多div点击切换显隐的简洁写法

你现在的重复代码问题核心是把每个选项的切换逻辑单独封装了，实际上这类Tab切换逻辑完全可以统一抽象，不用给每个选项写单独函数，整体改造成本很低：

改造思路 #

核心逻辑只有两步：点击任意侧边栏选项时，先把所有内容面板全部隐藏，再单独把当前选项对应的面板设为显示即可。通过统一类名+自定义属性关联选项和对应面板，后续新增功能也不用重复写逻辑。

具体改法 #

1. 调整CSS #

用统一类控制面板的显隐状态，不用罗列所有id写样式，也不用直接操作内联样式：

*,
html {
  color: #fff;
  background-color: black;
}

/* 所有内容面板默认隐藏 */
.content-panel {
  display: none;
}

/* 激活状态的面板显示为grid布局 */
.content-panel.active {
  display: grid;
}

2. 调整HTML结构 #

• 给所有侧边栏选项加统一类sidebar-item，通过data-target属性绑定对应内容面板的id，去掉原来的内联onclick事件
• 给所有内容面板加统一类content-panel

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="MOD.CSS">
  <script src="main2.js"></script>
  <title>Base Template</title>
</head>
<body>
  <div>
    <ul>
      <li class="sidebar-item" data-target="presale">Presale</li>
      <li class="sidebar-item" data-target="claim">Claim</li>
      <li class="sidebar-item" data-target="stake">Stake</li>
      <!-- 后续新增选项只要按这个格式加li即可，不用改JS -->
    </ul>
    <div id="presale" class="content-panel">
      <h1>Presale</h1>
    </div>
    <div id="claim" class="content-panel">
      <h1>Claim</h1>
    </div>
    <div id="stake" class="content-panel">
      <h1>Stake</h1>
    </div>
    <!-- 后续新增面板只要加对应id的div、带上content-panel类即可 -->
  </div>
</body>
</html>

你原来引入的jQuery 1.5.2版本过于老旧，下面的原生JS实现不需要依赖jQuery，可以直接把对应的script标签移除，减少页面加载资源。

3. 替换原有JS逻辑 #

整个切换逻辑只需要写一次，不管有多少个侧边栏选项都能自动适配：

// 等页面DOM加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', () => {
  // 一次性获取所有侧边栏选项和内容面板
  const sidebarItems = document.querySelectorAll('.sidebar-item');
  const contentPanels = document.querySelectorAll('.content-panel');

  // 给每个选项绑定点击事件
  sidebarItems.forEach(item => {
    item.addEventListener('click', () => {
      // 获取当前选项对应的目标面板id
      const targetPanelId = item.dataset.target;
      // 先隐藏所有面板
      contentPanels.forEach(panel => panel.classList.remove('active'));
      // 再显示当前对应的目标面板
      document.getElementById(targetPanelId).classList.add('active');
    })
  })
})

方案优势 #

• 没有任何重复代码，核心JS逻辑只有十几行
• 后续扩展非常方便，新增侧边栏选项和内容面板只需要按规则写HTML，不需要修改JS和CSS逻辑
• 样式和逻辑分离，后续要调整显隐效果（比如加切换动画、修改布局方式）直接改CSS类即可，不需要动JS代码

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