单击Javascript中的按钮后如何显示div？

IT技术 javascript html
2021-02-23 13:38:34

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

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

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/

它只显示按钮，但在我点击时不显示文本
2021-04-23 13:38:34
Ahsan Rathod，谢谢。如何显示数组 Div usibng javascript。你能帮我吗？<div style="float:left; width:420px; padding:10px 0px;display:none;" class="answer_list" id="welcomeDiv" > <?php $query1="select * from tblanswers where questionID='$question' and productID='$product_id'"; $result1=mysql_query($query1); while($qwe=mysql_fetch_array($result1)) { ?> <input type="radio" name="answer[<?php echo $question; ?>]" value="<?php echo $qwe['answer_id' ]; ?>" /><?php echo $qwe['text']; ?> <br /> <?php } ?> </div>
2021-05-01 13:38:34

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.
  });
});
它只显示按钮，但在我点击时不显示文本
2021-04-23 13:38:34
如果我使用 JS 执行此操作，则在我重新加载页面后块会消失，但我希望该框一直保留到我明确关闭它为止。我该怎么做？
2021-05-01 13:38:34
@MarcinCylke，很好的观察：P
2021-05-07 13:38:34
你的 JQuery 代码比使用 document.getElementById 更优雅——当然只有在使用 JQuery 时才有用：D
2021-05-10 13:38:34 
<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>

<div  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" onclick="document.getElementsByClassName('answer_list')[0].style.display = 'auto';">
@Walialu，我明白你在说什么，但一般来说，内联 JS 是不好的做法。OP 可能在站点上运行其他 JS。我将我的逻辑放在一个函数中，以便可以将它添加到他/她已经引用的 .js 文件之一。仅供参考-这是读好：robertnyman.com/2008/11/20/...。
2021-04-26 13:38:34
@James Hill：你想为这个案例声明一个函数吗？var fooJames = function(id){var d = document.getElementById(id);if(d.style.display=='block')d.style.display='none';return; d.style.display='block'; } 在德国，我们称之为：Mit Kanonen auf Spatzen schießen！
2021-05-03 13:38:34
如何让显示的内容在另一次点击时折叠？
2021-05-04 13:38:34
getElementsByClassName 将返回一整套项目.. 你需要像这样声明你想改变哪一个 getElementsByClassName('foo')[0].style.display...
2021-05-14 13:38:34
其它你可能感兴趣的问题
上一篇我应该在哪里声明我的页面中使用的 JavaScript 文件？在 <head></head> 或 </body> 附近？ 下一篇CSS3-Animate 元素（如果在视口中可见）（页面滚动）