javascript - 使用 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>