显示隐藏的div并关闭其他div，以便一次显示1个

。

在前端开发中，我们经常需要实现显示隐藏的效果，其中一种常见的方式是通过控制div元素的显示和隐藏来实现。下面是一种实现方式：

HTML结构：

<div class="container">
  <button onclick="toggleDiv(1)">显示/隐藏1</button>
  <div id="div1" class="hidden">内容1</div>
  <button onclick="toggleDiv(2)">显示/隐藏2</button>
  <div id="div2" class="hidden">内容2</div>
  <button onclick="toggleDiv(3)">显示/隐藏3</button>
  <div id="div3" class="hidden">内容3</div>
</div>

CSS样式：

.hidden {
  display: none;
}

JavaScript代码：

function toggleDiv(divNumber) {
  var div = document.getElementById("div" + divNumber);
  var buttons = document.getElementsByTagName("button");
  for (var i = 0; i < buttons.length; i++) {
    var button = buttons[i];
    if (button !== event.target) {
      var otherDiv = document.getElementById("div" + button.getAttribute("onclick").match(/\d+/)[0]);
      otherDiv.classList.add("hidden");
    }
  }
  div.classList.toggle("hidden");
}

上述代码中，我们通过给每个按钮绑定一个onclick事件来实现点击按钮时显示或隐藏对应的div。在toggleDiv函数中，我们首先获取到要显示或隐藏的div元素，然后遍历所有的按钮，将除当前点击的按钮外的其他div元素隐藏起来。最后，通过classList.toggle方法来切换当前div元素的显示或隐藏状态。

这种方式可以实现一次只显示一个div，并且点击其他按钮时会自动关闭当前显示的div。你可以根据实际需求修改HTML结构和JavaScript代码来适应不同的场景。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。