javascript控制层显示或隐藏的方法


Posted in Javascript onJuly 22, 2015

本文实例讲述了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 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
javascript实现简单查找与替换的方法
Jul 22 #Javascript
javascript数组随机排序实例分析
Jul 22 #Javascript
JavaScript对数组进行随机重排的方法
Jul 22 #Javascript
JavaScript检测上传文件大小的方法
Jul 22 #Javascript
JavaScript动态改变div属性的实现方法
Jul 22 #Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 #Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 #Javascript
You might like
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
万能的php分页类
2017/07/06 PHP
超清晰的document对象详解
2007/02/27 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
csdn 批量接受好友邀请
2009/02/19 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
在Django中创建第一个静态视图
2015/07/15 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
学校门卫岗位职责范本
2014/06/30 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书