A-A+

js点击显示一个div模块

2017年08月16日 前端设计 暂无评论 阅读 0 views 次

在做后台效果的时候,需要一个JS的配合,也就是在一个页面会有两个DIV的效果,但一个是隐藏的,只有点击按钮之后才会显示出另外一个DIV块内的内容,其实这样的效果是很简单的,就是一个简单的JS,但突然之间就不会写了,没办法,只好翻墙到谷歌找答案了。

好了,就是一段简单的html代码,下面就直接给拷贝出来了,直接拿到html里面运行就可以了,如果是跟自己后台结合的话,稍微的更改一下就OK了。

  1. <html>  
  2. <body>  
  3. <script>  
  4. function show(){  
  5. document.getElementById("div").style.display="";  
  6. //alert(document.getElementById("div").style.display)  
  7. }  
  8. function hidden(){  
  9. document.getElementById("div").style.display="none";  
  10. //alert(document.getElementById("div").style.display)  
  11. }  
  12. </script>  
  13. <BODY>  
  14. <input name="name" type="button" onClick="show();" value="显示">  
  15. <div id="div" style="display: none" onMouseout="hidden();">  
  16. show it  
  17. </div>  
  18. </BODY>  
  19. </HTML>  

原理就不用多说了吧,就是先把需要隐藏的DIV给隐藏掉,然后通过 JS 来进行控制显示就行了,点击按钮的时候进行触发显示DIV块内容。

标签:

给我留言