按鈕切換顯示顯示隱藏

我想通過單擊按鈕來顯示隱藏這些圖層的顯示。我不知道如何用 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

uj5u.com熱心網友回復：

嘗試使用以下代碼：

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

uj5u.com熱心網友回復：

有很多方法可以做到這一點。我在各種模板中看到的一種常見方法是添加和洗掉類。另一種方法是從按鈕的 onclick 屬性呼叫該函式。但我最喜歡的是撰寫一個不需要編輯 div HTML 的函式，因為我不想干擾 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。否則，執行相反的操作。”

uj5u.com熱心網友回復：

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

  <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

uj5u.com熱心網友回復：

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

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

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>

uj5u.com熱心網友回復：

對于這種情況，javascript 具有切換功能。我稍微重寫了你的代碼。

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>

標籤：

上一篇：如何移動范圍內的文本

下一篇：CSS自動換行和溢位不破壞段落