编程 Javascript

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程序设计有所帮助。

- Author -

中国风2012

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery中offsetParent()方法用法实例

Jan 19 Javascript

JQuery显示隐藏页面元素的方法总结

Apr 16 Javascript

手机端页面rem宽度自适应脚本

May 20 Javascript

Bootstrap的popover（弹出框）2秒后定时消失的实现代码

Feb 27 Javascript

JavaScript组件开发之输入框加候选框

Mar 10 Javascript

jQuery DOM节点的遍历方法小结

Aug 15 jQuery

详解基于vue的服务端渲染框架NUXT

Jun 20 Javascript

基于Bootstrap下拉框插件bootstrap-select使用方法详解

Aug 07 Javascript

Bootstrap导航菜单点击后无法自动添加active的处理方法

Aug 10 Javascript

JavaScript中var的重要性实例分析

Jul 09 Javascript

详解element-ui级联菜单（城市三级联动菜单）和回显问题

Oct 02 Javascript

vue 实现购物车总价计算

Nov 06 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