javascript控制层显示或隐藏的方法
更新时间：2015年07月22日 17:22:43 作者：中国风2012
这篇文章主要介绍了javascript控制层显示或隐藏的方法,涉及javascript操作页面元素样式的相关技巧,非常简单实用,需要的朋友可以参考下
本文实例讲述了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 和 canvas 压缩图像可以使用 canvas 的 drawImage() 方法将图像绘制到 canvas 上，然后使用 toDataURL() 方法将图像转换为 Data URL 形式，这篇文章主要介绍了JavaScript 图像压缩的相关资料,需要的朋友可以参考下2023-01-01
JS通过识别id、value值对checkbox设置选中状态
最开始需要获取的是input value值设置checkbox选中状态，由于input value要使用计算业务，后来改造为id，这里就为大家分享一下实现代码,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了javascript实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
JavaScript中一些浮点数相加减会计算错误，本文将为大家具体介绍一下JavaScript中解决任意两数加减会出现错误的方案，需要的可以参考一下2022-02-02
JavaScript代码在执行前会经历一个预处理阶段,这个阶段主要涉及变量提升和函数提升,下面这篇文章主要介绍了js进阶语法之变量提升、函数提升以及参数的命名冲突问题解决的相关资料,需要的朋友可以参考下2024-09-09
DES加密算法的方法把用户信息在发送的时候进行加密很实用，下面有个不错的示例，需要的朋友可以参考下2013-10-10
js弹窗想必大家都有见到过吧，如何要说可以自由拖拽，并兼容大部分浏览器的就没有几个了吧，本文的这个示例或许是大家要找的，可以参考下2013-10-10
脚本收藏iframe...2006-07-07![this[] 指的是什么内容 讨论](//img.jbzj.com/images/xgimg/bcimg8.png)
this[] 指的是什么内容 讨论...2007-03-03
详解JavaScript中的before-after-hook钩子函数
最近看别人的代码，接触到一个插件，before-after-hook，百度搜一圈也没有看到什么地方有教程,本文就来简单介绍一下这个插件的使用方法，需要的可以参考一下2022-12-12
![this[] 指的是什么内容 讨论](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论