A-A+
js点击显示一个div模块
在做后台效果的时候,需要一个JS的配合,也就是在一个页面会有两个DIV的效果,但一个是隐藏的,只有点击按钮之后才会显示出另外一个DIV块内的内容,其实这样的效果是很简单的,就是一个简单的JS,但突然之间就不会写了,没办法,只好翻墙到谷歌找答案了。
好了,就是一段简单的html代码,下面就直接给拷贝出来了,直接拿到html里面运行就可以了,如果是跟自己后台结合的话,稍微的更改一下就OK了。
- <html>
- <body>
- <script>
- function show(){
- document.getElementById("div").style.display="";
- //alert(document.getElementById("div").style.display)
- }
- function hidden(){
- document.getElementById("div").style.display="none";
- //alert(document.getElementById("div").style.display)
- }
- </script>
- <BODY>
- <input name="name" type="button" onClick="show();" value="显示">
- <div id="div" style="display: none" onMouseout="hidden();">
- show it
- </div>
- </BODY>
- </HTML>
原理就不用多说了吧,就是先把需要隐藏的DIV给隐藏掉,然后通过 JS 来进行控制显示就行了,点击按钮的时候进行触发显示DIV块内容。