js点击显示多个div

在JavaScript中，通过点击事件来控制多个div元素的显示与隐藏是一种常见的交互方式。以下是实现这一功能的基础概念和相关代码示例。

基础概念

DOM操作：JavaScript通过Document Object Model (DOM) API来操作HTML文档，包括元素的显示与隐藏。
事件监听：使用addEventListener方法为元素添加点击事件监听器。
CSS样式控制：通过修改元素的CSS样式属性（如display）来控制元素的显示状态。

实现步骤

HTML结构：创建多个div元素，并为每个div设置一个唯一的标识符（如ID）。
JavaScript逻辑：编写脚本来监听特定元素的点击事件，并在事件触发时切换目标div的显示状态。

示例代码

以下是一个简单的示例，展示了如何通过点击按钮来显示或隐藏多个div元素。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle Divs</title>
<style>
  .hidden { display: none; }
</style>
</head>
<body>

<button id="toggleButton">Toggle Divs</button>

<div id="div1" class="hidden">Content of Div 1</div>
<div id="div2" class="hidden">Content of Div 2</div>
<div id="div3" class="hidden">Content of Div 3</div>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.getElementById('toggleButton').addEventListener('click', function() {
  toggleDiv('div1');
  toggleDiv('div2');
  toggleDiv('div3');
});

function toggleDiv(divId) {
  var div = document.getElementById(divId);
  if (div.classList.contains('hidden')) {
    div.classList.remove('hidden');
  } else {
    div.classList.add('hidden');
  }
}