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 Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 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程序员工具
2008/05/26 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python实现的栈(Stack)
2018/01/26 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
小学生学习雷锋倡议书
2014/05/15 职场文书
文秘应届生求职信
2014/07/05 职场文书
刑事代理授权委托书
2014/09/17 职场文书
放假通知范文
2015/04/14 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技