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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
js+html制作简单验证码
Feb 16 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
详解Vue demo实现商品列表的展示
May 07 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
JS内置对象和Math对象知识点详解
Apr 03 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 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
对于Python的Django框架部署的一些建议
2015/04/09 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
MYSQL基础面试题
2012/05/13 面试题
金融专业推荐信
2013/11/14 职场文书
财务会计专业推荐信
2013/11/30 职场文书
二年级语文教学反思
2014/02/02 职场文书
品牌转让协议书
2014/08/20 职场文书
五年级数学教学反思
2016/02/16 职场文书