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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
layui导出所有数据的例子
Sep 10 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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获取汉字的拼音(全部与首字母)
2013/06/27 PHP
php跨站攻击实例分析
2014/10/28 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
微信支付的开发流程详解
2016/09/13 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
js类型检查实现代码
2010/10/29 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
浅谈node的事件机制
2017/10/09 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
vue实现简单学生信息管理
2020/05/30 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python 列表list使用介绍
2014/11/30 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python numpy存取文件的方式
2020/04/01 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
python安装及变量名介绍详解
2020/12/12 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
生产副总岗位职责
2013/11/28 职场文书
领班岗位职责范文
2014/02/06 职场文书
2015大学生求职信范文
2015/03/20 职场文书