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 相关文章推荐
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
vue router demo详解
Oct 13 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
php google或baidu分页代码
2009/11/26 PHP
php的字符串用法小结
2010/06/08 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python使用tensorflow深度学习识别验证码
2018/04/03 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
python 实现超级玛丽游戏
2020/11/25 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
新浪网技术部笔试题
2016/08/26 面试题
职业规划书如何设计?
2014/01/09 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
个人租房协议书样本
2014/10/01 职场文书
2014年标准化工作总结
2014/12/17 职场文书
小兵张嘎观后感
2015/06/03 职场文书
电影开国大典观后感
2015/06/04 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python