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 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
javascript代码加载优化方法
Jan 30 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 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
一个目录遍历函数
2006/10/09 PHP
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php.ini 中文版
2006/10/28 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
php创建类并调用的实例方法
2019/09/25 PHP
jquery访问ashx文件示例代码
2014/08/11 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
python之消除前缀重命名的方法
2018/10/21 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
什么是Rollback Segment
2013/04/22 面试题
家佳咖啡店创业计划书
2013/12/27 职场文书
2014年质检工作总结
2014/11/26 职场文书
五年级学生评语大全
2014/12/26 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书