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 相关文章推荐
基于Jquery的温度计动画效果
Jun 18 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
javascript闭包入门示例
Apr 30 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
JS代码实现table数据分页效果
May 26 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
php结合js实现多条件组合查询
May 28 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 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获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
基于python中theano库的线性回归
2018/08/31 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
食堂个人先进事迹
2014/01/22 职场文书
优秀实习生感言
2014/03/01 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
工程部岗位职责范本
2015/04/11 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang