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 相关文章推荐
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
如何提高Dom访问速度
Jan 05 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
微信小程序收藏功能的实现代码
Jun 19 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
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 无限级数据JSON格式及JS解析
2010/07/17 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
基于Python实现用户管理系统
2019/02/26 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
生日宴会答谢词
2014/01/09 职场文书
中文师范生自荐信
2014/01/30 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
学生保证书
2015/01/16 职场文书
升学宴祝酒词
2015/08/11 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Mysql 设置boolean类型的操作
2021/06/04 MySQL
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android