代码描述:JavaScript点击按钮 切换隐藏和显示。JavaScript点击按钮实现隐藏和显示切换代码实例
在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此效果,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端/title> <style type="text/css"> #thediv{ width:200px; height:100px; line-height:100px; text-align:center; background-color:green; } </style> <script type="text/javascript"> function Show_Hidden(obj){ if(obj.style.display=="block"){ obj.style.display='none'; } else{ obj.style.display='block'; } } window.onload=function(){ var olink=document.getElementById("link"); var odiv=document.getElementById("thediv"); olink.onclick=function(){ Show_Hidden(odiv); return false; } } </script> </head> <body> <a href="#" id="link">显示\\隐藏切换</a> <div id="thediv" style="display:block">51前端欢迎您</div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能