显示其他 div 时隐藏 div

Question

我正在构建一个带有 3 个按钮的页面，每个按钮打开一个不同的 div 元素。我想要的是当时只显示一个 div。所以当一个 div 打开时，另一个 div 应该关闭。我设法创建按钮，每个按钮打开一个不同的 div 元素。但是我想不出在打开其他 div 时自动关闭 div 的方法。var button1 = document.getElementById("button1");var button2 = document.getElementById("button2");var button3 = document.getElementById("button3");var content1 = document.getElementById("content1");var content2 = document.getElementById("content2");var content3 = document.getElementById("content3");content1.style.display = "none";content2.style.display = "none";content3.style.display = "none";button1.addEventListener("click", showContent1);button2.addEventListener("click", showContent2);button3.addEventListener("click", showContent3);function showContent1() {  if (content1.style.display !== "none") {    content1.style.display = "none"  } else {    content1.style.display = "block";  }}function showContent2() {  if (content2.style.display !== "none") {    content2.style.display = "none"  } else {    content2.style.display = "block";  }}function showContent3() {  if (content3.style.display !== "none") {    content3.style.display = "none"  } else {    content3.style.display = "block";  }}#button1,#button2,#button3 {  width: 50px;  height: 50px;  background: lightblue;  margin: 5px;  cursor: pointer;}#content1,#content2,#content3 {  width: 100px;  height: 50px;  background: blue;  color: white;  margin: 5px;}<div id="button1">button 1</div><div id="button2">button 2</div><div id="button3">button 3</div><div id="content1">content 1</div><div id="content2">content 2</div><div id="content3">content 3</div>

Answer 1

你甚至可以创建一个标签系统，无需任何JavaScript在所有使用单选按钮的CSS技巧。

如果选中了单选按钮，则使用同级选择器:显示下一个 div ~。

input{

  display: none;

}

label{

  display: inline-block;

  padding: 3px;

  border: 1px solid #aaa;

}

label:hover{

  cursor: pointer;

}

.display{

  display: none;

}

[type=radio]:checked ~ .display{

  display: block;

}

<section>

  <label for="div1">Show div 1</label>

  <label for="div2">Show div 2</label>

  <label for="div3">Show div 3</label>

</section>

<section>

  <input type="radio" id="div1" name="tab-nav" checked />

  <div class="display">

    Text from div 1.

  </div>

</section>

<section>

  <input type="radio" id="div2" name="tab-nav" />

  <div class="display">

    Text from div 2. It's cool.

  </div>

</section>

<section>

  <input type="radio" id="div3" name="tab-nav" />

  <div class="display">

    Text from div 3. Definitely a cool css trick.

  </div>

</section>