单击Javascript中的按钮后如何显示div？ [复制]答案

【问题标题】：How to display div after click the button in Javascript? [duplicate]单击Javascript中的按钮后如何显示div？ [复制]
【发布时间】：2011-10-20 21:49:27
【问题描述】：

我有以下 DIV 。我想在按钮单击后显示 DIV。现在它是不显示

<div  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" >

【问题讨论】：

stackoverflow.com/questions/4357291/…
不幸的是，这里的每个答案都暗示了onclick 属性。请参阅Show/hide 'div' using JavaScript。像onclick 这样的内联事件处理程序是not recommended。它们是注册事件的obsolete, hard-to-maintain and unintuitive 方式。总是use addEventListener。

标签： javascript html

【解决方案1】：

HTML 代码：

<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Javascript：

function showDiv() {
   document.getElementById('welcomeDiv').style.display = "block";
}

查看演示：http://jsfiddle.net/rathoreahsan/vzmnJ/

【讨论】：

Ahsan Rathod，谢谢。如何显示数组 Div usibng javascript。你能帮帮我吗？
点击时只显示按钮不显示文字

【解决方案2】：

HTML

<div id="myDiv" style="display:none;" class="answer_list" >WELCOME</div>
<input type="button" name="answer" onclick="ShowDiv()" />

JavaScript

function ShowDiv() {
    document.getElementById("myDiv").style.display = "";
}

或者，如果您想使用带有漂亮小动画的 jQuery：

<input id="myButton" type="button" name="answer" />

$('#myButton').click(function() {
  $('#myDiv').toggle('slow', function() {
    // Animation complete.
  });
});

【讨论】：

您的 JQuery 代码比使用 document.getElementById 更优雅 - 当然仅在使用 JQuery 时有用：D
@MarcinCylke，很好的观察：P
如果我使用 JS 执行此操作，则在我重新加载页面后该块会消失，但我希望该框一直保留到我明确关闭它为止。我该怎么做？
点击时只显示按钮不显示文字

【解决方案3】：

<script type="text/javascript">
function showDiv(toggle){
document.getElementById(toggle).style.display = 'block';
}
</script>

<input type="button" name="answer" onclick="showDiv('toggle')">Show</input>

<div id="toggle" style="display:none">Hello</div>

【讨论】：

【解决方案4】：

<div  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" onclick="document.getElementsByClassName('answer_list')[0].style.display = 'auto';">

【讨论】：

getElementsByClassName 将返回一整套项目。您需要像这样声明要更改的项目 getElementsByClassName('foo')[0].style.display...
@James Hill：你想为这种情况声明一个函数吗？ var fooJames = function(id){var d = document.getElementById(id);if(d.style.display=='block')d.style.display='none';return; d.style.display='块';在德国，我们称之为：Mit Kanonen auf Spatzen schießen！
@Walialu，我明白你在说什么，但作为一般规则，内联 JS 是不好的做法。 OP 可能在站点上运行了其他 JS。我将我的逻辑放在一个函数中，以便可以将其添加到他/她已经引用的 .js 文件之一中。仅供参考 - 这是一本好书：robertnyman.com/2008/11/20/….
如何让显示的内容再次点击折叠？