[英]Switching between two div elements using Javascript
I have the following code for going from div "mainFrameOne" to div "mainFrameTwo". 我有以下代码从div“mainFrameOne”到div“mainFrameTwo”。 However, it cannot go back to mainFrameOne after changing to mainFrameTwo.
但是,在更改为mainFrameTwo后,它无法返回到mainFrameOne。 And I want it to be able to keep switching back and forth.
我希望它能够不断来回切换。 How would I best accomplish this?
我怎样才能做到最好?
HTML : 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 : JS:
function myFunction() {
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").style.display="block";
}
Add condition to check if the div is visible then hide it and show the other one if else do the reverse : 添加条件以检查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");
}
Hope this helps. 希望这可以帮助。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.