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 相关文章推荐
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
投票管理程序
2006/10/09 PHP
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
残疾人小组计划书
2014/04/27 职场文书
科技节口号
2014/06/19 职场文书
主题党日活动总结
2014/07/08 职场文书
运动会演讲稿300字
2014/08/25 职场文书
课外小组活动总结
2014/08/27 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL