问答详情
源自:3-5 显示和隐藏(display属性)

请问 我要实现 单击隐藏一段文字 然后显示另一段提示文字;之后点击再显示原先文字,隐藏提示文字; 请问这样的结构应该怎么写?

请问 我要实现 单击隐藏一段文字 然后显示另一段提示文字;之后点击再显示原先文字,隐藏提示文字; 请问这样的结构应该怎么写?

提问者:wubin_work 2016-06-27 13:13

个回答

  • HEI_ComeOn
    2016-06-27 13:43:07
    已采纳

    假如这两段文字,一个id值是one  另一个是two

    我觉得你可以写一个类似下面这样的方法:

    function change(){  //方法名你自己想一个合理的

    var one = document.getElementById("one");

    var two = document.getElementById("two");

    if(one.style.display=="none"){

      one.style.display="block";

      two.style.display="none";

    }else{ 

     one.style.display="none";

      two.style.display="block";

    }

    }


  • wubin_work
    2016-06-27 14:24:53

       <h1>一键隐藏显示</h1>  

        <p id="one">点击隐藏这段文字</p> 

        <p id="two" style="display: none;">啊啊啊啊啊啊啊啊啊啊啊啊啊</p> 

        <form>

          <input type="button" onclick="change()" value="一键隐藏显示">

        </form>

        <script type="text/javascript">

        function change()  

         {  

         var one = document.getElementById("one");

        var two=document.getElementById("two");

        if (one.style.display=="none"){

             one.style.display="block";

             two.style.display="none";

        }

        else{

           one.style.display="none";

           two.style.display="block";

        }

         }

         </script>

    我按照您写的完美解决了 问题 就是一点不明白 one.style.display=="none" 这句话是什么意思 为什么要用双== ?双==与单=有何不同? 为何我<h1>一键隐藏显示</h1>  

        <p id="three">点击隐藏这段文字</p> 

        <p id="four" style="display: none;">啊啊啊啊啊啊啊啊啊啊啊啊啊</p> 

        <form>

          <input type="button" onclick="chane()" value="一键隐藏显示">

        </form>

        <script type="text/javascript">

        function chane()  

         {  

         var three = document.getElementById("three");

        var four=document.getElementById("four");

        if (three.style.display=="block"){

             three.style.display="none";

             four.style.display="block";

        }

        else{

           three.style.display="block";

           four.style.display="none";

        }

         }

         </script> 这些写之后 需要多点一下 按钮?能帮我解释下么 不胜感激!