按鈕切換顯示顯示隱藏

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";
  }
}

Answer 2

有很多方法可以做到這一點。 我在各種模板中看到的一種常見方法是添加和刪除類。 另一種方法是從按鈕的 onclick 屬性中調用 function。 但我最喜歡的是編寫一個不需要編輯 div HTML 的 function 因為我不想干擾 HTML 的工作，我只想把功能代碼放入那里。 （順便說一句，我很肯定有一種更優雅的方式來寫這個，但是你去吧！）

const firstDiv = document.querySelector("#first");
const secondDiv = document.querySelector("#second");
const firstButt = document.querySelector("#toggle");
const secondButt = document.querySelector("#toggletoo");
firstButt.addEventListener("click",toggleDivShowHide);
secondButt.addEventListener("click",toggleDivShowHide);
function toggleDivShowHide() {
    if (firstDiv.style.display !== "none") {
      firstDiv.style.display = "none";
      secondDiv.style.display = "block";
  } else {
      firstDiv.style.display = "block";
      secondDiv.style.display = "none";
  }
}

您是說“如果第一個 div 設置為 none，則將其設置為阻止並將第二個 div 設置為 none。否則，執行相反的操作。”

Answer 3

我嘗試了一些不同的東西，這是有效的:)))

  <div id="first"  style="display:none;"> This is the FIRST div</div>
  <div id="second"  style="display:none;"> This is the SECONDdiv</div>
<input type="button" name="answer" value="Show first div and hide second div" onclick="showDivOne()" />
<input type="button" name="answer" value="Show second div and hide first div" onclick="showDivTwo()" />

function showDivOne() {
   document.getElementById('first').style.display = "block";
  document.getElementById('second').style.display = "none";
}
function showDivTwo() {
   document.getElementById('second').style.display = "block";
  document.getElementById('first').style.display = "none";
}   

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

Answer 4

更正：您應該為切換和切換添加事件監聽器。

解決方案：具有可重用代碼的解決方案。

 const Toggles = document.querySelectorAll('.toggle'); const Hides = document.querySelectorAll('.hide'); Toggles.forEach((el) => { el.addEventListener("click", (e) => { Hides.forEach((el) => { el.parentElement.firstElementChild.classList.add('hide'); }); e.target.parentElement.firstElementChild.classList.toggle('hide'); }); })

 .hide { display: none; }

 <div> <div class="hide">This is the FIRST div</div> <button class="toggle">Show first div and hide first div</button> </div> <div> <div class="hide">This is the SECOND div</div> <button class="toggle">Show second div and hide first div</button> </div> <div> <div class="hide">This is the Third div</div> <button class="toggle">Show Third div and hide first div</button> </div> <div> <div class="hide">This is the Fourth div</div> <button class="toggle">Show Fourth div and hide first div</button> </div>

Answer 5

對於這種情況，javascript 具有切換開關 function。 我稍微重寫了你的代碼。

 const btns = document.querySelectorAll(".toggleBtn"); btns.forEach(b => { b.onclick = function (e) { reset(); console.log(e.target.getAttribute('data-target')) const target = e.target.getAttribute('data-target'); const t = document.querySelector('#' + target); t.classList.toggle('hide'); } }); function reset() { const divs = document.querySelectorAll('.out'); divs.forEach(d => d.classList.add('hide')) }

 .hide { display: none; }

 <div id="first" class="out hide">This is the FIRST div</div> <div id="second" class="out hide">This is the SECOND div</div> <button class="toggleBtn" data-target="first">Show first div and hide second div</button> <button class="toggleBtn" data-target="second">Show second div and hide first div</button>