javascript - 按钮切换显示显示隐藏

Question

我想通过单击按钮显示隐藏这些层的显示。我不知道如何使用 2 个按钮和 2 个 div...

HTML:

<div id="first">This is the FIRST div</div>
<div id="second">This is the SECOND div</div>
<button id="toggle">Show first div and hide second div</button>
<button id="toggletoo">Show second div and hide first div</button>

CSS:

#first {
  display: none;
}
#second {
  display: none;
}

Js:

const targetDiv = document.getElementById("first");
const btn = document.getElementById("toggle");
btn.onclick = function () {
  if (targetDiv.style.display !== "none") {
    targetDiv.style.display = "block";
  } else {
    targetDiv.style.display = "none";
  }
}

https://codepen.io/MaaikeNij/pen/YzrgbQw

Answer 1

试试下面的代码:

#first{
  display: block; /* <--- change */
}
#second {
  display: none;
}

const firstDiv = document.getElementById("first");
const secondDiv = document.getElementById("second");
document.getElementById("toggle").onclick = function () {
  if (firstDiv.style.display === "none") {
    firstDiv.style.display = "block";
    secondDiv.style.display = "none";
  } else {
    firstDiv.style.display = "none";
    secondDiv.style.display = "block";
  }
}