javascript控制层显示或隐藏的方法
2015-07-22 00:00
726 查看
本文实例讲述了javascript控制层显示或隐藏的方法。分享给大家供大家参考。具体实现方法如下:
<html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript"> function showLay1(){ lay1.style.visibility="visible"; lay2.style.visibility="hidden"; lay3.style.visibility="hidden"; } function showLay2(){ lay1.style.visibility="visible"; lay2.style.visibility="visible"; lay3.style.visibility="hidden"; } function showLay3(){ lay1.style.visibility="visible"; lay2.style.visibility="visible"; lay3.style.visibility="visible"; } </script> <body> <div id="lay1" style="position:absolute; left:60px; top:30px; width:250px; height:200px; index:1; visibility:visible">这是第一层内容,它的背景是透明的</div> <div id="lay2" style="position:absolute; left:60px; top:30px; width:250px; height:200px; index:2; visibility:hidden; background-color:silver">这是第二层内容,它的背景是灰色的</div> <div id="lay3" style="position:absolute; left:60px; top:30px; width:250px; height:200px; index:3; visibility:hidden"><br><br><br>这是第三层内容,它的背景是透明的</div> <form id="form1" style="position:absolute; left:70px; top:250px;"> <input type="button" value="第一层" onclick="showLay1()"> <input type="button" value="第二层" onclick="showLay2()"> <input type="button" value="第三层" onclick="showLay3()"> </form> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章推荐
- javascript实现状态栏文字首尾相接循环滚动的方法
- Sails.js 之 concepts Assets
- Web页中使用MediaPlayer
- 解决Javascript new Date(DateString)出错
- JavaScript写一个拼图游戏
- javascript中10进制和其他进制之间的转换
- JS工厂模式介绍
- JSP中的PageContext
- JS DOM编程艺术——用JS实现动画效果—— JS学习笔记2015-7-21(第88天)
- 轻装上阵,安卓工程师之路---day02(CSS&JavaScript)
- Web项目中使用JSTL标签问题
- FastJson-JSONField
- 外部引用JavaScript文件乱码问题
- JavaScript原型链问题
- JavaScript 文件拖拽上传插件 dropzone.js 学习总结。
- jsp之过滤器
- JS正则替换掉小括号及内容
- JS正则替换掉小括号及内容
- JS正则替换掉小括号及内容
- javascript 深拷贝