显示其他div时隐藏div

Question

我正在建立一个包含3个按钮的页面，每个按钮都打开一个不同的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

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

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

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

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

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

演示

$("[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>

Answer 2

这是一种规范的方法。

请研究一下我在哪里授课并添加了课程

在jQuery示例中使用toggle（）打开并单击关闭

jQuery：

$(".button").on("click", function(e) {
  $(".content").hide(); 
  $("#" + $(this).data("id")).show(); // or .toggle()
});

.button {
  width: 50px;
  height: 50px;
  background: lightblue;
  margin: 5px;
  cursor: pointer;
}

.content {
  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 class="button" data-id="content1">button 1</div>
<div class="button" data-id="content2">button 2</div>
<div class="button" data-id="content3">button 3</div>
<div class="content" id="content1">content 1</div>
<div class="content" id="content2">content 2</div>
<div class="content" id="content3">content 3</div>

香草JS

document.getElementById("nav").addEventListener("click", function(e) {
  var tgt = e.target;
  if (tgt.matches(".button")) {
    document.querySelectorAll(".content").forEach(function(div) { // a simple for loop is needed for older IE
      div.style.display = "none";
    });
    // Here I just show. If you want to toggle, you could use classList.toggle
    document.getElementById(tgt.getAttribute("data-id")).style.display = "block";
  }
});

.button {
  width: 50px;
  height: 50px;
  background: lightblue;
  margin: 5px;
  cursor: pointer;
}

.content {
  width: 100px;
  height: 50px;
  background: blue;
  color: white;
  margin: 5px;
  display: none;
}

<div id="nav">
  <div class="button" data-id="content1">button 1</div>
  <div class="button" data-id="content2">button 2</div>
  <div class="button" data-id="content3">button 3</div>
</div>
<div class="content" id="content1">content 1</div>
<div class="content" id="content2">content 2</div>
<div class="content" id="content3">content 3</div>

Answer 3

您甚至可以使用单选按钮css技巧创建一个完全没有任何JavaScript 的标签系统。

如果选中了单选按钮，则使用sibling selector：~显示下一个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>

这是另一个src，它是demo。

Answer 4

//find all buttons
document.querySelectorAll("button[data-target]").forEach(el => {
  //put a click event on each button
  el.addEventListener("click", ev => {
    //when clicked, hide all divs
    let divs = document.getElementsByClassName("my-div");
    for (let div of divs) { 
      div.style = "display: none;"; 
    }
    
    //then show the div that this button should be showing
    //by grabbing it's id from the data-target attribute and setting it's style
    document.getElementById(el.getAttribute("data-target")).style = "display: block;";
  });
});

.my-div {
  display: none;
}

<button data-target="div1">div1</button>
<button data-target="div2">div2</button>
<button data-target="div3">div3</button>

<div class="my-div" id="div1">content 1</div>
<div class="my-div" id="div2">content 2</div>
<div class="my-div" id="div3">content 3</div>

Answer 5

如果这是您最终要实现的目标，请参阅Accordion。

如果您不想在第二次单击时隐藏相同的内容，请删除按钮的click事件中的条件。

解决方案：

button1.addEventListener("click", () => activeDiv = (activeDiv === "content1") ? "": "content1");
button2.addEventListener("click", () => activeDiv = (activeDiv === "content2") ? "": "content2");
button3.addEventListener("click", () => activeDiv = (activeDiv === "content3") ? "": "content3");
button1.addEventListener("click", openDivGroup);
button2.addEventListener("click", openDivGroup);
button3.addEventListener("click", openDivGroup);

var activeDiv = '';
function openDivGroup ($event) {
    var contentIdArray = jQuery ("[id^=content]");
    for (var i = 0; i < contentIdArray.length; i++) {
        if (activeDiv === contentIdArray[i].id) contentIdArray[i].style.display = 'block';
        else contentIdArray[i].style.display = 'none';
    }
}

代码片段：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style>
	#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;
	}
</style>
</head>
<body>

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

<script>
	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", () => activeDiv = (activeDiv === "content1") ? "": "content1");
	button2.addEventListener("click", () => activeDiv = (activeDiv === "content2") ? "": "content2");
	button3.addEventListener("click", () => activeDiv = (activeDiv === "content3") ? "": "content3");
	button1.addEventListener("click", openDivGroup);
	button2.addEventListener("click", openDivGroup);
	button3.addEventListener("click", openDivGroup);

	var activeDiv = '';
	function openDivGroup ($event) {
		var contentIdArray = jQuery ("[id^=content]");
		for (var i = 0; i < contentIdArray.length; i++) {
			if (activeDiv === contentIdArray[i].id) contentIdArray[i].style.display = 'block';
			else contentIdArray[i].style.display = 'none';
		}
	}
	</script>
</body>
</html>