关闭打开的元素并显示新单击的元素

<div id="container">
  <button class="toggle-btn" data-target="content1">Toggle Content 1</button>
  <button class="toggle-btn" data-target="content2">Toggle Content 2</button>
  <div id="content1" class="content">Content 1</div>
  <div id="content2" class="content">Content 2</div>
</div>

.content {
  display: none;
}

.content.active {
  display: block;
}

document.addEventListener('DOMContentLoaded', function() {
  const buttons = document.querySelectorAll('.toggle-btn');

  buttons.forEach(button => {
    button.addEventListener('click', function() {
      const targetId = this.getAttribute('data-target');
      const targetElement = document.getElementById(targetId);

      // 关闭所有内容
      document.querySelectorAll('.content').forEach(content => {
        content.classList.remove('active');
      });

      // 显示当前点击的内容
      targetElement.classList.add('active');
    });
  });
});