<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*

{

    margin:0px;

    padding:0px;

    }

.all

{

    width:310px;

    height:50px;

    border:#03F 1px solid;

    }

.left

{

    width:250px;

    height:50px;

    border:#F00 1px solid;

    }

.right

{

    width:50px;

    height:50px;

    border:#0F3 1px solid;

    background-color:#CCC;

    margin-left:255px;

    }

.yincang

{

    height:200px;

    width:200px;

    border:#30F 1px solid;

    background-color:#06F;

    margin-top:30px;

    visibility:hidden;

    }

</style>

</head>

<body>

<div class="all">

   <div class="left">

     <div class="right" onmouseover="xianshi()" onmouseout="yincang()">>><div class="yincang"  id="right"></div>

     </div>

   </div>

</div>

</body>

</html>

<script type="text/javascript">

function xianshi()

{

    var a =document.getElementById("right");

    if(a.style.visibility="hidden")

    {

        a.style.visibility="visible";

    }

    }

function yincang()

{

    var b =document.getElementById("right");

    if(b.style.visibility="visible")

    {

        b.style.visibility="hidden";

        }

    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*

{

    margin:0px;

    padding:0px;

    }

.diyiceng

{

    width:500px;

    height:300px;

    border:#9C6 1px solid;

    margin:-300px 0px 0px 100px;

    background-color:yellow;

    visibility:visible;

    }

.dierceng

{

    width:500px;

    height:300px;

    border:#9C6 1px solid;

    background-color:green;

    visibility:hidden;

    margin-left:100px;

    }

.disanceng

{

    width:500px;

    height:300px;

    border:#9C6 1px solid;

    margin-top:-300px;

    margin-left:200px;

    background-color:blue;

    visibility:hidden;

    }

</style>

</head>

<body>

<div style="width:600px; height:300px; border:#00F 1px solid">

<div style="width:100px; height:300px; border:#F00 1px solid">

<input type="button" value="第一层"  onclick="xianshiyi()"/><br />

<input type="button" value="第二层"  onclick="xianshier()"/><br />

<input type="button" value="第三层"  onclick="xianshisan()"/>

</div>

  <!--第一层为黄色 第二层为绿色 第三层为蓝色-->

     <div class="diyiceng" id="diyiceng">

         <div class="dierceng" id="dierceng"></div>

              <div class="disanceng" id="disanceng"></div>

     </div>

</div>

</body>

</html>

<script type="text/javascript">

function xianshiyi()

  {

       var a = document.getElementById("dierceng");

       var b = document.getElementById("disanceng");

       var c = document.getElementById("diyiceng");

       if(c.style.visibility="hidden")

       {

           c.style.visibility="visible";

           a.style.visibility="hidden";

           b.style.visibility="hidden";

           }

      }

  function xianshier()

  {

      var a = document.getElementById("dierceng");

      var b = document.getElementById("disanceng");

       if(a.style.visibility="hidden")

       {

           a.style.visibility="visible";

           b.style.visibility="hidden";

           }

  }

  function xianshisan()

  {

         var b=document.getElementById("disanceng");

         if(b.style.visibility="hidden")

        {

             b.style.visibility="visible";

        }

  }

</script>

JS——覆盖显示，点击显示三层的更多相关文章

  1. js如何实现点击显示和隐藏表格

    js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...

  2. 基于js原生封装的点击显示完整文字

    基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...

  3. JS点击显示隐藏内容

    JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...

  4. js点击显示隐藏

    这个栗子…… 可以不吃,先预设一个变量表示div的状态,例子中0是显示的,一开始是隐藏的.当点击时判断状态是显示0的还是隐藏1的:如果是显示的就把div隐藏,再把变量改变为1.再次点击时把会判断到变量 ...

  5. Firebug中调试中的js脚本中中文内容显示为乱码

    Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...

  6. jQuery 点击显示再次点击隐藏

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  7. HTML5--》点击显示隐藏内容

    <details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...

  8. 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

  9. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏

    JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏 window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 基本语法: ...

随机推荐

  1. Linq之旅：Linq入门详解（Linq to Objects）【转】

    http://www.cnblogs.com/heyuquan/p/Linq-to-Objects.html Linq之旅:Linq入门详解(Linq to Objects) 示例代码下载:Linq之 ...

  2. ISP图像调试工程师——色彩还原（熟悉图像预处理和后处理技术）

    http://blog.sina.com.cn/s/blog_5e125dcf0100k8s3.html 色彩还原: https://wenku.baidu.com/view/123fb51a6edb ...

  3. OceanBase支持索引查询啦！

    OceanBase支持索引后,上面的例子中用索引的查询速度是不用索引查询速度的40倍! 相关阅读 OceanBase简史 OceanBase Join操作 OceanBase内部表 OceanBase ...

  4. os.waitpid()无法获取sys.exit()退出时的status code

    [目的] 父进程使用os.waitpid()等待子进程退出,并检测子进程的exit code,以决定是否重启子进程. (常见的应用场景是:子进程接收外部命令,收到"stop"时退出 ...

  5. 转：用十条命令在一分钟内检查Linux服务器性能

    转自:http://www.infoq.com/cn/news/2015/12/linux-performance?utm_campaign=rightbar_v2&utm_source=in ...

  6. Mybatis错误：Result Maps collection already contains value for 。。。。

    解决方法 原因:xml文件中存在重名对象,保持名称不要一样即可正常启动.因为我再次使用逆向工程生成mapper接口和xml文件时,忘了删除原来的xml文件,新生成的与旧的同时出现旧重复了. 那么我们在 ...

  7. Uber 四年时间增长近 40 倍，背后架构揭秘

    据报道,Uber 仅在过去4年的时间里,业务就激增了 38 倍.Uber 首席系统架构师 Matt Ranney 在一个非常有趣和详细的访谈<可扩展的 Uber 实时市场平台>中告诉我们 ...

  8. JBoss 系列十九：使用JGroups构建块RspFilter对群组通信返回消息进行过滤

    内容概述 本部分说明JGroups构建块接口RspFilter,具体提供一个简单示例来说明如何使用JGroups构建块RspFilter对群组通信返回消息进行过滤. 示例描述 我们知道构建块基于通道之 ...

  9. Android中的线程池概述

    线程池 Android里面,耗时的网络操作,都会开子线程,在程序里面直接开过多的线程会消耗过多的资源,在众多的开源框架中也总能看到线程池的踪影,所以线程池是必须要会把握的一个知识点; 线程运行机制 开 ...

  10. iOS项目开发实战——使用CoreLocation获取当前位置信息

    随着基于位置服务LBS和移动互联网的兴起,你的位置是越来越重要的一个信息.位置服务已经是当前的热门应用如微信.陌陌等社交应用的杀手锏.而在iOS开发中,苹果已经给我们提供了一个位置接口.CoreLoc ...