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 相关文章推荐
js读取本地excel文档数据的代码
Nov 11 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
vue3使用vue-count-to组件的实现
Dec 25 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 模拟$_PUT实现代码
2010/03/15 PHP
php 团购折扣计算公式
2011/11/24 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
对python生成业务报表的实例详解
2019/02/03 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
安全生产月宣传标语
2014/10/06 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
安全保证书
2015/01/16 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
MySql数据库触发器使用教程
2022/06/01 MySQL
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang