使用Javascript在兩個div元素之間切換

Question

我有以下代碼從div“mainFrameOne”到div“mainFrameTwo”。 但是，在更改為mainFrameTwo后，它無法返回到mainFrameOne。 我希望它能夠不斷來回切換。 我怎樣才能做到最好？

HTML：

<div id="mainFrameOne">
    <p>mainFrameOne</p>
</div>
<div id="mainFrameTwo" style="display:none;">
    <p>mainFrameTwo</p>
</div>
<button onclick="myFunction()">Click me</button>

JS：

function myFunction() { 
    document.getElementById("mainFrameOne").style.display="none"; 
    document.getElementById("mainFrameTwo").style.display="block"; 
}

Answer 1

添加條件以檢查div是否可見，然后將其隱藏並顯示另一個，否則執行相反操作：

function myFunction() {
   var mainFrameOne = document.getElementById("mainFrameOne"); 
   var mainFrameTwo = document.getElementById("mainFrameTwo");

   mainFrameOne.style.display = (
       mainFrameOne.style.display == "none" ? "block" : "none"); 
   mainFrameTwo.style.display = (
       mainFrameTwo.style.display == "none" ? "block" : "none"); 
}

希望這可以幫助。

---

 function myFunction() { var mainFrameOne = document.getElementById("mainFrameOne"); var mainFrameTwo = document.getElementById("mainFrameTwo"); mainFrameOne.style.display = ( mainFrameOne.style.display == "none" ? "block" : "none"); mainFrameTwo.style.display = ( mainFrameTwo.style.display == "none" ? "block" : "none"); } 

 <div id="mainFrameOne"> <p>mainFrameOne</p> </div> <div id="mainFrameTwo" style="display:none;"> <p>mainFrameTwo</p> </div> <button onclick="myFunction()">Click me</button>