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获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
Vuex的热更替如何实现
Jun 05 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做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
js常用函数 不错
2006/09/08 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
node内置调试方法总结
2018/02/22 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python中endswith()函数的基本使用
2015/04/07 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
如何定义TensorFlow输入节点
2020/01/23 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
求职信范文大全
2014/05/26 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
城管年度个人总结
2015/02/28 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
考研经验交流会策划书
2015/11/02 职场文书