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

在前端开发中，关闭已打开的元素并显示新单击的元素通常涉及到JavaScript的事件处理和DOM操作。以下是基础概念和相关实现方法：

基础概念

事件处理：JavaScript允许我们为HTML元素添加事件监听器，以便在特定事件（如点击）发生时执行代码。
DOM操作：文档对象模型（DOM）是HTML和XML文档的编程接口。我们可以使用JavaScript来查询、修改DOM元素。

实现方法

以下是一个简单的示例，展示如何关闭已打开的元素并显示新单击的元素：

HTML结构

<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>

CSS样式

.content {
  display: none;
}

.content.active {
  display: block;
}

JavaScript代码

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');
    });
  });
});

解释

HTML结构：每个按钮都有一个data-target属性，指向要显示的内容元素的ID。
CSS样式：.content类默认隐藏内容，.active类用于显示内容。
JavaScript代码：
- 在DOM加载完成后，为每个按钮添加点击事件监听器。
- 点击按钮时，获取data-target属性的值，找到对应的内容元素。
- 遍历所有内容元素，移除active类以隐藏它们。
- 为当前点击的目标内容元素添加active类以显示它。