Toggle - 單擊另一個按鈕時如何隱藏信息

Question

當我打開另一個按鈕時如何隱藏信息？ 現在，如果底部已經顯示了信息，而我單擊另一個按鈕，則信息只會顯示在底部。

 function myClick() { var x = document.getElementById("myDIV"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } function myClick2() { var x = document.getElementById("myDIV2"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } }

 #myDIV, #myDIV2 { display: none; } .wrapper { display: flex; } .col { display: inline-block; width: 50%; padding: 2px 8px; } .box { display: flex; background-color: #f4f4f4; }

 <div class="wrapper"> <div class="col"> <div class="box" onclick="myClick()">Box</div> </div> <div class="col"> <div class="box" onclick="myClick2()">This is a box</div> </div> </div> <div id="myDIV"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> </div> <div id="myDIV2"> This is my DIV element. </div>

Answer 1

這只是一個邏輯問題。 當您單擊一個按鈕時，您只是隱藏/顯示相關文本，而對其他文本不做任何處理。

這不是（到目前為止）最好的編程方法，但很好開始。

您必須刪除 myClick2 函數並僅使用一個函數：myClick，傳遞一個參數。 此參數“告訴”函數按下了哪個按鈕。 函數應該是這樣的：

function myClick(btn) {
  var x = document.getElementById("myDIV");
  var y = document.getElementById("myDIV2");
  if (btn === 1) {
    x.style.display = "none";
    y.style.display = "block";
  } else if (btn === 2) {
    x.style.display = "block";
    y.style.display = "none";
  } else {
    alert('The button has no related text');
  }
}

在 HTML 部分，以這種方式調用傳遞參數的函數：兩個按鈕執行相同的函數，傳遞不同的數字作為參數。

<div class="wrapper">
  <div class="col">
    <div class="box" onclick="myClick(1)">Box</div>
  </div>

  <div class="col">
    <div class="box" onclick="myClick(2)">This is a box</div>
  </div>
</div>

Answer 2

試試這個，它可以輕松幫助您在隱藏其他 div Html 的同時在 Div 之間切換

 <div class="wrapper"> <div class="col"> <button class="box">Box</button> </div> <div class="col"> <button class="box1">This is a box</button> </div> </div> <div id="myDIV" class="display"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> </div> <div id="myDIV2" class="display"> This is my DIV element. </div>

css

 .display{ display: none; } .show{ display:block; } .wrapper { display: flex; } .col { display: inline-block; width: 50%; padding: 2px 8px; } .box .box1 { display: flex; background-color: #f4f4f4; }

JS

 var show = document.querySelector(".box"); var showOne = document.querySelector(".box1"); show.addEventListener("click", onclick); function onclick() { document.getElementById("myDIV").classList.toggle("show"); document.getElementById("myDIV").classList.toggle("display"); document.getElementById("myDIV2").classList.remove("show"); document.getElementById("myDIV2").classList.add("display"); } showOne.addEventListener("click",()=>{ document.getElementById("myDIV2").classList.toggle("show"); document.getElementById("myDIV").classList.remove("show"); document.getElementById("myDIV").classList.add("display"); document.getElementById("myDIV2").classList.toggle("display"); });