代码描述:jQuery点击按钮 显示或隐藏元素。jQuery点击按钮显示或隐藏元素简单介绍
分享一段代码实例,它实现了点击按钮元素隐藏和显示效果。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>元素的显示和隐藏-51前端</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $("div").hide(1000); $("#show").click(function(){ $("div").show(1000); }) }) }) </script> </head> <body> <div>51前端欢迎您</div> <button id="show">显示</button> <button id="hide">隐藏</button> </body> </html>
以上代码实现了我们的要求,可以点击按钮的时候实现div的隐藏和显示。 然后实际应用中都是点击同一个按钮来实现元素的显示和隐藏效果,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> #hidden_enent{ width:200px; height:150px; background:#ccc; text-align:center; line-height:150px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $('#click_event').click(function(){ if($('#hidden_enent').is(':hidden')){ $('#hidden_enent').show(); $('#click_event').val('点击隐藏'); } else{ $('#hidden_enent').hide(); $('#click_event').val('点击显示'); } }) }) </script> </head> <body> <input type="button" id="click_event" value="点击隐藏"/> <div id="hidden_enent">51前端欢迎您</div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能