在 div 之间切换：如何一次只显示一个 div？

Question

我有两个内容不同的 div。单击按钮时，我设法添加了显示隐藏 div 功能。问题是，当一个 div 可见并且我单击第二个按钮时，它们都是可见的。我想一次只显示一个 div - 当显示一个 div 并单击另一个按钮时，前一个 div 应该自动隐藏。

我不想使用 jQuery，希望只使用纯 JavaScript。

function horTxtFunction() {
	var x = document.getElementById("horTxt");
	if (x.style.display === "none") {
		x.style.display = "block";
	} else {
		x.style.display = "none";
	}
}

function verTxtFunction() {
	var x = document.getElementById("verTxt");
	if (x.style.display === "none") {
		x.style.display = "block";
	} else {
		x.style.display = "none";
	}
}

<button onclick="horTxtFunction()">Horisontaalne tekstiga</button>
<button onclick="verTxtFunction()">Vertikaalne tekstiga</button>

<div id="horTxt" style="display:none;">
<p>Some content here</p>
</div>

<div id="verTxt" style="display:none;">
<p>Some different content here</p>
</div>

Answer 1

考虑将两个 <div> 标签包装在控制器 <div> 标签中，然后使用“状态”来控制将显示哪个子 <div>。

在下面的示例中，我使用属性 dir 来保存状态，并使用 CSS 来播放状态和子 <div> 类。

var holder = document.querySelector("[dir]");

function horTxtFunction() {
  holder.setAttribute('dir', 'hor');
}

function verTxtFunction() {
  holder.setAttribute('dir', 'ver');
}

[dir="ver"] > :not(.verTxt),
[dir="hor"] > :not(.horTxt) {
  display: none;
}

<button onclick="horTxtFunction()">Horisontaalne tekstiga</button>
<button onclick="verTxtFunction()">Vertikaalne tekstiga</button>

<div dir="hor">
  <div class="horTxt">
    <p>Some content here</p>
  </div>

  <div class="verTxt">
    <p>Some different content here</p>
  </div>
</div>

这样做的主要好处是如果您需要添加其他孩子：

var holder = document.querySelector("[dir]");

function toggle(val) {
  holder.setAttribute('dir', val);
}

[dir="ver"] > :not(.verTxt),
[dir="hor"] > :not(.horTxt),
[dir="left"] > :not(.leftTxt),
[dir="right"] > :not(.rightTxt) {
  display: none;
}

<button onclick="toggle('hor')">Horizontal</button>
<button onclick="toggle('ver')">Vertical</button>
<button onclick="toggle('left')">Left</button>
<button onclick="toggle('right')">Right</button>

<div dir="hor">
  <div class="horTxt">
    <p>Some content here</p>
  </div>
  <div class="verTxt">
    <p>Some different content here</p>
  </div>
  <div class="leftTxt">
    <p>This is the left text area</p>
  </div>
  <div class="rightTxt">
    <p>This is the right text area</p>
  </div>
</div>

在这里，我更改为单个事件处理程序并传入我要显示的部分。然后我不得不扩展 CSS 来处理新的<div> 标签。但现在成长为更多的孩子只是添加按钮、div 和 CSS。

更新

为了先隐藏所有<div> 标签，我做了一个小改动：

var holder = document.querySelector(".holder");

function toggle(val) {
  holder.setAttribute('dir', val);
}

.holder > div {
  display: none;
}

[dir=ver] > .verTxt,
[dir=hor] > .horTxt,
[dir=left] > .leftTxt,
[dir=right] > .rightTxt {
  display: block;
}

<button onclick="toggle('hor')">Horizontal</button>
<button onclick="toggle('ver')">Vertical</button>
<button onclick="toggle('left')">Left</button>
<button onclick="toggle('right')">Right</button>

<div class="holder">
  <div class="horTxt">
    <p>Some content here</p>
  </div>
  <div class="verTxt">
    <p>Some different content here</p>
  </div>
  <div class="leftTxt">
    <p>This is the left text area</p>
  </div>
  <div class="rightTxt">
    <p>This is the right text area</p>
  </div>
</div>

这隐藏了所有内部<div> 标记，然后仅根据dir 属性的值显示正确的标记。由于没有要启动的dir 属性，因此不会显示内部<div>s。

Answer 2

您需要确保隐藏另一个 div 而不仅仅是显示另一个。

function horTxtFunction() {
var x = document.getElementById("horTxt");
var otherDiv = document.getElementById("verTxt");
if (x.style.display === "none") {
    x.style.display = "block";
    overDiv.style.display = "none";
} else {
    x.style.display = "none";
    overDiv.style.display = "block";
}

}