JavaScript实现点击按钮时关闭之前的内容盒子方法求助

下面是一套简洁的实现方案，用HTML+CSS+JavaScript就能搞定：

HTML 结构 #

<div class="button-group">
  <button class="content-btn" data-target="content1">展示内容1</button>
  <button class="content-btn" data-target="content2">展示内容2</button>
  <button class="content-btn" data-target="content3">展示内容3</button>
</div>

<!-- 内容盒子 -->
<div class="content-box" id="content1">
  <img src="your-image-1.jpg" alt="图片1描述">
  <p>这是内容1的详细描述文本</p>
</div>
<div class="content-box" id="content2">
  <img src="your-image-2.jpg" alt="图片2描述">
  <p>这是内容2的详细描述文本</p>
</div>
<div class="content-box" id="content3">
  <img src="your-image-3.jpg" alt="图片3描述">
  <p>这是内容3的详细描述文本</p>
</div>

CSS 样式 #

/* 基础样式 */
.button-group {
  margin-bottom: 20px;
}
.content-btn {
  margin-right: 10px;
  padding: 8px 16px;
  cursor: pointer;
}
.content-box {
  display: none; /* 默认隐藏所有内容盒子 */
  padding: 15px;
  border: 1px solid #ddd;
  margin-top: 10px;
}
.content-box.active {
  display: block; /* 激活状态显示盒子 */
}

JavaScript 逻辑 #

// 获取所有按钮和内容盒子
const buttons = document.querySelectorAll('.content-btn');
const contentBoxes = document.querySelectorAll('.content-box');

// 给每个按钮绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 1. 先隐藏所有内容盒子
    contentBoxes.forEach(box => {
      box.classList.remove('active');
    });
    // 2. 获取当前按钮对应的目标盒子ID
    const targetId = button.getAttribute('data-target');
    // 3. 显示目标盒子
    document.getElementById(targetId).classList.add('active');
  });
});

核心逻辑说明 #

• 用data-target属性关联按钮和对应的内容盒子，避免硬编码ID，维护更方便
• 每次点击按钮时，先移除所有内容盒子的active类（隐藏），再给目标盒子添加active类（显示），确保同一时间只有一个盒子打开
• 如果需要支持点击当前按钮关闭自身，可以在逻辑里加判断：如果目标盒子已经是激活状态，就移除active类，否则执行上述步骤

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