我试图让div在点击时消失并使另一个div出现在我编写的地方并使用javascript运行代码;

Question

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

Answer 1

Really you need a button so you can bind your function to the onclick event. 你真的需要一个按钮，所以你可以将你的功能绑定到onclick事件。 Here is a possible solution: 这是一个可能的解决方案：

 <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>

Answer 2

        <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 -->

Answer 3

If something is not working you can consider using addEventListener. 如果某些东西不起作用，您可以考虑使用addEventListener。 Example: 例：

document.getElementById('button').addEventListener('click', changeVisibility(), null);
function changeVisibility()
{
    document.getElementById('divToHide').style.display = "none";
    document.getElementById('divToShow').style.display = "block";
}

我试图让div在点击时消失并使另一个div出现在我编写的地方并使用javascript运行代码;

问题描述

3 个解决方案

解决方案1
1 2015-06-27 17:26:32

解决方案2
0 2015-06-27 19:20:21

解决方案3
0 2015-06-27 19:31:07

我试图让div在点击时消失并使另一个div出现在我编写的地方并使用javascript运行代码;

问题描述

3 个解决方案

解决方案1 1 2015-06-27 17:26:32

解决方案2 0 2015-06-27 19:20:21

解决方案3 0 2015-06-27 19:31:07

解决方案1
1 2015-06-27 17:26:32

解决方案2
0 2015-06-27 19:20:21

解决方案3
0 2015-06-27 19:31:07