如何显示/隐藏内容

我有一个页面，我想要两个按钮，当点击一个按钮时，显示hello，当另一个按钮被点击时会隐藏“hello”消息，然后显示“再见”。我知道这需要在JavaScript中完成，但我不擅长JavaScript。如何显示/隐藏内容

2016-04-29 Harry Pen

的显示或可见这是非常基本的。如果你不能自己想出来，你需要阅读一些Javascript教程。否则，你会来这里为你需要做的每一件小事。 – Barmar

我知道，我尝试了一些JavaScript，但它会显示消息，但不会隐藏以前的消息。正如我所说，我没有使用javascript的经验 –

如果您需要帮助您的代码，您需要发布您尝试的内容。然后，我们可以告诉你你做错了什么，你会从中学习。你不需要复制别人写的代码就可以学到很多东西。 – Barmar

检查这个片段

<p id="msg"></p> 
 

 
<button onclick="helloFunction()">Say Hello</button> 
 
<button onclick="byeFunction()">Wave Goodbye</button> 
 

 
<script> 
 
function helloFunction() { 
 
    document.getElementById("msg").innerHTML = "Hello"; 
 
} 
 
    
 
    function byeFunction() { 
 
    document.getElementById("msg").innerHTML = "Goodbye"; 
 
} 
 

 
</script>

来源

2016-04-29 22:27:48

辉煌！那很完美。谢谢！ –

如果它解决了你的问题，你应该把它作为正确的答案。谢谢！：D – Dresden

有几个方法可以做到这一点，其中一个将影响DOM元素的可见性，其打招呼或再见，另一种方法如下图所示，您实际上会根据按下哪个按钮来更改dom对象的文本

<button onClick="javascript:say('Hello');">Say Hi</button> 
<button onClick="javascript:say('Goodbye');">Say Goodbye</button> 
<div id="TextField"></div> 
<script> 
    function say(text) { 
     var element = document.getElementById("TextField"); 
     element.innerHTML = text; 
    } 
</script>

来源

2016-04-29 22:29:54

-1

在这里你需要实现这样的壮举。

首先创建一个div或p标签来保存UR文字和两个按钮如

<div id="container">Hello</div> 
    <button id="show">Show</button> 
    <button id="hide">Show</button>

确保您的div有一个id，你太按钮。你用它作为参考。

然后，在JavaScript，你可以切换div

<script type="text/javascript"> 
     //Declare variable 
    var div = document.getElementById("container"); 
    var show = document.getElementById("show"); 
     var hide = document.getElementById("hide"); 

    //run when windows fully loads 
    window.onload = function(){ 

     //when i click show button 
     show.onclick = function(){ 
       div.style.display = "block"; 
      } 

     //when i click hide button 
     hide.onclick = function(){ 
       div.style.display = "none"; 
      } 

     } 

     //That is champ, this is all vanilla javascript. You can also look    into implementing with jquery. 
    </script>

来源

2016-04-29 22:30:16

为什么标记下来？内联JavaScript实际上不是最佳实践 –

如何显示/隐藏内容

回答

相关问题