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 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
PHP数据库处理封装类实例
2016/12/24 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
Vue中props的详解
2019/05/16 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Python 自动补全(vim)
2014/11/30 Python
Python中运行并行任务技巧
2015/02/26 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
pandas的排序和排名的具体使用
2019/07/31 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
python实现双人五子棋(终端版)
2020/12/30 Python
简约控的天堂:The Undone
2016/12/21 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
《孔繁森》教学反思
2014/04/17 职场文书
禁烟标语大全
2014/06/11 职场文书
欠条范文
2015/07/03 职场文书
保护环境的宣传语
2015/07/13 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python