显示其他div时隐藏div [英] Hide div when other div is showing

问题描述

我正在构建一个包含3个按钮的页面，每个按钮都打开一个不同的div元素.我想要的是同时仅显示一个格.因此，当一个div打开时，另一div应该关闭.

I am building a page with 3 buttons, each opening a different div-element. What I want, is to show just one div at the time. So when one div is opened, the other div should close.

我设法创建了分别打开不同的div元素的按钮.但是我想不出在打开其他div时自动关闭div的方法.

I managed to create the buttons each opening a different div-element. But I cannot figure out a way to automatically close the div when other div is opened.

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>

推荐答案

您可以将代码缩减为以下形式:

You can cut down your code to something like this:

$("[id^=button]").click(function() {
  var id = $(this).attr("id").replace("button", "")
  $("#content" + id).toggle();
});

下面的代码一次只能显示1格.

The code below will only allow 1 div to show at the time.

$("[id^=button]").click(function() {
  var id = $(this).attr("id").replace("button", "");
  $("[id^=content]").hide()
  $("#content" + id).show();
});

在这里，我们使用^表示我们希望以button开头的所有元素触发点击事件.

Here we are using the ^ to say that we want all element starting with button to trigger the click event.

演示

$("[id^=button]").click(function() {
  var id = $(this).attr("id").replace("button", "")
  $("#content" + id).toggle();
});

#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;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

这篇关于显示其他div时隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！