600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 点击按钮显示或隐藏Div块

点击按钮显示或隐藏Div块

时间:2021-09-24 01:00:23

相关推荐

点击按钮显示或隐藏Div块

通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换

代码如下:

方法一:

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function() {$("button").click(function() {$("#div1").toggle();});});</script></head><body><h3>点击按钮显示或隐藏Div块</h3><button type="button">按钮</button><div id="div1" style="border:2px solid #ff0000">再点击一下按钮我就会隐藏起来.</div></body></html>

方法二:

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">function showOrHide(){var div = $("#div1").get(0);if(div.style.display == ""){div.style.display = "none";}else{div.style.display = "";}}</script></head><body><h3>点击按钮显示或隐藏Div块</h3><button οnclick="showOrHide()" type="button">按钮</button><div id="div1" style="display: none;border:2px solid #ff0000;">再点击一下按钮我就会隐藏起来.</div></body></html>

效果如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。