我试图让一个 div 在点击时消失，并使另一个 div 出现在我使用 javascript 编写和运行代码的位置；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31091419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I am trying to make a div disappear on click and make another div appear in its place I have wrote and run code using javascript;
提问by Sharath Zotis
document.getElementById("nextOneButton").onclick = function(){
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").visibility="visible";
}
//mainFrameTwo is initially set hidden in terms of visibillity
//nextOneButton is on top of the mainFrameOne in terms of position, when //clicked it should move to next frame. Some what like a slide show
回答by Ash
Really you need a button so you can bind your function to the onclick event. Here is a possible solution:
你真的需要一个按钮，这样你就可以将你的函数绑定到 onclick 事件。这是一个可能的解决方案：
<html>
<head>
<title></title>
<script>
function myFunction() {
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").style.display="block";
}
</script>
</head>
<body>
<div id="mainFrameOne">
<p>mainFrameOne</p>
</div>
<div id="mainFrameTwo" style="display:none;">
<p>mainFrameTwo</p>
</div>
<button onclick="myFunction()">Click me</button>
</body>
</html>Alternatively, you could use anchor tags to remove the need for the button:
或者，您可以使用锚标记来消除对按钮的需要：
<html>
<head>
<title></title>
<script>
function myFunction() {
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").style.display="block";
}
</script>
</head>
<body>
<a id="mainFrameOne" onclick="myFunction()" href="#">
mainFrameOne
</a>
<a id="mainFrameTwo" href="#" style="display:none;">
mainFrameTwo
</a>
</body>
</html>回答by Sharath Zotis
<div id ="activeContent" >
<div id ="mainFrameOne"> <!-- POSITION MATTERS WHEN YOU WANT TO DO THE DISSAPEARING ACT WITH JAVASCRIPT -->
<img src="person.gif" id ="person" width="1350" height ="900">
<div id ="backOneButton"> <h4 class ="directionButtonsText"> Back </h4> </div>
<div id ="nextOneButton"> <h4 class ="directionButtonsText"> Next </h4> </div>
<div id = "mainFrameOneTitleBar">
<h3 id ="jakesLemonade">Jake's Lemonade Stand</h3>
</div> <!-- End of MainFrameTitleBar -->
<h3 id = "firstTextJake"> This is Jake, the owner of a small lemonade stand.<br> Like many other small business owners, Jake wants to know <br>what the future holds for him. CloudFin can tell him exactly that. </h3>
</div> <!-- End of MainFrameOne Div-->
<div id ="mainFrameTwo">
<div id ="backTwoButton"> <h4 class ="directionButtonsText"> Back </h4> </div>
<div id ="nextTwoButton"> <h4 class ="directionButtonsText"> Next </h4> </div>
<div id = "mainFrameTwoTitleBar">
<h3 id ="lemsLemons">When life gives you lemons, Make lemonade</h3>
<script type="text/javascript">
</script>
</div> <!-- End of MainFrameTitleBar -->
<h3 id = "secondTextJake"> How much does each lemon cost?</h3>
</div> <!-- End of MainFrameTwo -->
</div> <!-- End of ActiveContent Div -->
回答by Mattia Merlini
If something is not working you can consider using addEventListener. Example:
如果某些东西不起作用，您可以考虑使用 addEventListener。例子：
document.getElementById('button').addEventListener('click', changeVisibility(), null);
function changeVisibility()
{
document.getElementById('divToHide').style.display = "none";
document.getElementById('divToShow').style.display = "block";
}
