代码描述:js实现 点击显示 隐藏相关内容。js实现点击显示或者隐藏相关内容代码下载
很多应用中,可能会有这样的效果,一些内容在默认状态下是隐藏的,当点击一个按钮就会将此内容显示出来,下面就通过代码实例简单介绍一下如何实现此效果,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> function $(idvalue){ return document.getElementById(idvalue); } function showtext(){ if($('text').style.display=='none'){ $('text').style.display=''; $("themore").value="隐藏内容"; } else{ $('text').style.display='none'; $("themore").value="显示内容"; } } window.onload=function(){ var themore=document.getElementById("themore"); themore.onclick=function(){ showtext(); } } </script> </head> <body> <div id="text" style="display:none;">51前端欢迎您</div> <input id="themore" type="button" value="查看信息" /> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能