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实现控制经纬度显示地图与卫星
May 20 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
Vue.js基础知识小结
Jan 13 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
JS实现多功能计算器
Oct 28 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
详解PHP中的PDO类
2015/07/06 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python字符串Intern机制详解
2019/07/01 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
如何使用PHP session
2015/04/21 面试题
2014年五四青年节演讲稿范文
2014/04/22 职场文书
煤矿安全生产标语
2014/06/06 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书