脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript控制层显示或隐藏

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

您可能感兴趣的文章:

相关文章

  • js实现上传图片及时预览

    js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下
    2016-05-05
  • JavaScript的设计模式经典之建造者模式

    JavaScript的设计模式经典之建造者模式

    建造者模式是设计模式的一种，将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。接下来通过本文给大家介绍JavaScript的设计模式经典之建造者模式，感兴趣的朋友一起学习吧
    2016-02-02
  • JavaScript显示当前文档最后修改日期的方法

    JavaScript显示当前文档最后修改日期的方法

    这篇文章主要介绍了JavaScript显示当前文档最后修改日期的方法,实例分析了javascript中document.lastModified的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • 解决Babylon.js中AudioContext was not allowed to start异常问题

    解决Babylon.js中AudioContext was not allowed&nbs

    这篇文章主要介绍了解决Babylon.js中AudioContext was not allowed to start异常问题方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • js友好的时间返回函数

    js友好的时间返回函数

    这篇文章主要为大家详细介绍了js友好的时间返回函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • LayUi中接口传数据成功,表格不显示数据的解决方法

    LayUi中接口传数据成功,表格不显示数据的解决方法

    今天小编就为大家分享一篇LayUi中接口传数据成功,表格不显示数据的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 通过Kettle自定义jar包供javascript使用

    通过Kettle自定义jar包供javascript使用

    这篇文章主要介绍了通过Kettle自定义jar包供javascript使用,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • js判断传入时间和当前时间大小实例(超简单)

    js判断传入时间和当前时间大小实例(超简单)

    下面小编就为大家分享一篇js判断传入时间和当前时间大小实例(超简单)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • 用JS写的简单的计算器实现代码

    用JS写的简单的计算器实现代码

    参加某公司的面试后，有一机试题目：用web技术开发一个B/S结构的公式解析器。于是想了想思路，神来一笔想先写个计算器程序做基础，于是便写了这个程序。
    2009-09-09
  • JavaScript实现新年倒计时效果

    JavaScript实现新年倒计时效果

    这篇文章主要为大家详细介绍了JavaScript实现新年倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11

最新评论