如何实现点击按钮切换显示与隐藏不同的div元素

以下是同时满足两个需求的简洁实现方案：

完整代码示例 #

HTML 结构 #

<!-- 切换按钮组 -->
<button class="tab-btn" data-target="profile">个人资料</button>
<button class="tab-btn" data-target="dashboard">控制台</button>

<!-- 内容容器组 -->
<div class="tab-content active" id="profile">
  这里是个人资料的专属内容
</div>
<div class="tab-content" id="dashboard">
  这里是控制台的专属内容
</div>

CSS 样式 #

/* 默认隐藏所有内容容器 */
.tab-content {
  display: none;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

/* 激活状态的内容容器显示 */
.tab-content.active {
  display: block;
}

/* 可选：按钮样式优化 */
.tab-btn {
  padding: 8px 16px;
  margin-right: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
}

JavaScript 逻辑 #

// 获取所有切换按钮
const tabButtons = document.querySelectorAll('.tab-btn');

// 绑定点击事件处理函数
tabButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 获取当前按钮对应的目标容器ID
    const targetId = btn.getAttribute('data-target');
    
    // 隐藏所有已激活的内容容器
    document.querySelectorAll('.tab-content.active').forEach(content => {
      content.classList.remove('active');
    });
    
    // 显示目标内容容器
    document.getElementById(targetId).classList.add('active');
  });
});

核心逻辑说明 #

• 用data-target属性建立按钮与内容容器的关联，新增按钮/容器时无需修改JS代码，扩展性强
• 通过CSS类active控制显示状态，比直接操作DOM样式更符合语义化，也便于后续样式扩展
• 点击按钮时先统一隐藏所有内容，再显示目标容器，完美实现「切换显示当前目标、隐藏其他容器」的需求

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