1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. *
  8. {
  9.     margin:0px;
  10.     padding:0px;
  11.     }
  12.  
  13. .all
  14. {
  15.     width:310px;
  16.     height:50px;
  17.     border:#03F 1px solid;
  18.     }
  19. .left
  20. {
  21.     width:250px;
  22.     height:50px;
  23.     border:#F00 1px solid;
  24.     }
  25. .right
  26. {
  27.     width:50px;
  28.     height:50px;
  29.     border:#0F3 1px solid;
  30.     background-color:#CCC;
  31.     margin-left:255px;
  32.     }
  33. .yincang
  34. {
  35.     height:200px;
  36.     width:200px;
  37.     border:#30F 1px solid;
  38.     background-color:#06F;
  39.     margin-top:30px;
  40.     visibility:hidden;
  41.  
  42.     }
  43. </style>
  44. </head>
  45.  
  46. <body>
  47. <div class="all">
  48.    <div class="left">
  49.      <div class="right" onmouseover="xianshi()" onmouseout="yincang()">>><div class="yincang"  id="right"></div>
  50.      </div>
  51.  
  52.    </div>
  53.  
  54. </div>
  55.  
  56. </body>
  57. </html>
  58. <script type="text/javascript">
  59. function xianshi()
  60. {
  61.     var a =document.getElementById("right");
  62.  
  63.     if(a.style.visibility="hidden")
  64.     {
  65.         a.style.visibility="visible";
  66.     }
  67.  
  68.     }
  69. function yincang()
  70. {
  71.     var b =document.getElementById("right");
  72.  
  73.     if(b.style.visibility="visible")
  74.     {
  75.         b.style.visibility="hidden";
  76.  
  77.         }
  78.  
  79.     }
  80.  
  81. </script>

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. *
  8. {
  9.     margin:0px;
  10.     padding:0px;
  11.     }
  12. .diyiceng
  13. {
  14.     width:500px;
  15.     height:300px;
  16.     border:#9C6 1px solid;
  17.     margin:-300px 0px 0px 100px;
  18.     background-color:yellow;
  19.     visibility:visible;
  20.     }
  21. .dierceng
  22. {
  23.     width:500px;
  24.     height:300px;
  25.     border:#9C6 1px solid;
  26.     background-color:green;
  27.     visibility:hidden;
  28.     margin-left:100px;
  29.     }
  30. .disanceng
  31. {
  32.     width:500px;
  33.     height:300px;
  34.     border:#9C6 1px solid;
  35.     margin-top:-300px;
  36.     margin-left:200px;
  37.     background-color:blue;
  38.     visibility:hidden;
  39.     }
  40. </style>
  41. </head>
  42.  
  43. <body>
  44. <div style="width:600px; height:300px; border:#00F 1px solid">
  45. <div style="width:100px; height:300px; border:#F00 1px solid">
  46. <input type="button" value="第一层"  onclick="xianshiyi()"/><br />
  47. <input type="button" value="第二层"  onclick="xianshier()"/><br />
  48. <input type="button" value="第三层"  onclick="xianshisan()"/>
  49.  
  50. </div>
  51.   <!--第一层为黄色 第二层为绿色 第三层为蓝色-->
  52.      <div class="diyiceng" id="diyiceng">
  53.          <div class="dierceng" id="dierceng"></div>
  54.               <div class="disanceng" id="disanceng"></div>
  55.  
  56.      </div>
  57.  
  58. </div>
  59.  
  60. </body>
  61. </html>
  62. <script type="text/javascript">
  63. function xianshiyi()
  64.   {
  65.        var a = document.getElementById("dierceng");
  66.        var b = document.getElementById("disanceng");
  67.        var c = document.getElementById("diyiceng");
  68.  
  69.        if(c.style.visibility="hidden")
  70.        {
  71.            c.style.visibility="visible";
  72.            a.style.visibility="hidden";
  73.            b.style.visibility="hidden";
  74.  
  75.            }
  76.  
  77.       }
  78.   function xianshier()
  79.   {
  80.       var a = document.getElementById("dierceng");
  81.       var b = document.getElementById("disanceng");
  82.        if(a.style.visibility="hidden")
  83.        {
  84.  
  85.            a.style.visibility="visible";
  86.            b.style.visibility="hidden";
  87.            }
  88.   }
  89.   function xianshisan()
  90.   {
  91.          var b=document.getElementById("disanceng");
  92.          if(b.style.visibility="hidden")
  93.         {
  94.              b.style.visibility="visible";
  95.         }
  96.  
  97.   }
  98.  
  99. </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. sqlserver中事务总结：begin tran,rollback tran,commit tran

     第1个相关用法:摘自:https://shiyousan.com/post/f13d29b7-0d87-4168-bd8b-8b28b0991b5a 以下是出现错误的SQL部分语句: 此错误的原因是 ...

  2. Fedora 中的容器技术：systemd-nspawn

    本文将说明你可以怎样使用 Fedora 中各种可用的容器技术和学习“systemd-nspawn”的相关知识. 容器是什么? 一个容器就是一个用户空间实例,它能够在与托管容器的系统(叫做宿主系统)相隔 ...

  3. php.in

    [PHP] ;;;;;;;;;;; ; WARNING ; ;;;;;;;;;;; ; This is the default settings file for new PHP installati ...

  4. 一般源码安装添加的GD库 是不支持 jpeg 格式的图片的

    一般源码安装添加的GD库 是不支持 jpeg 格式的图片的,只支持如下格式 GD Support enabled GD Version bundled (2.0.34 compatible) GIF ...

  5. redis常用配置参数详解

    Redis 支持很多的参数,但都有默认值. daemonize 默认情况下, redis 不是在后台运行的,如果需要在后台运行,把该项的值更改为 yes. pidfile 当 Redis 在后台运行的 ...

  6. CentOS修复grub

    grub启动项损坏无法进入系统. 进入grub模式(可借助安排盘rescue后在shell中输入grub). 一:     通过下面三个命令中的一个.找到正确的grub位置.     1. find ...

  7. CodeIgniter 2.X 于 PHP5.6 兼容错误

    本篇文章由:http://xinpure.com/codeigniter-2-x-to-php5-6-compatible-error/ CI 3.0 已兼容此问题 在代码迁移的过程中,遇到了一个 P ...

  8. PHP使用file_put_contents写入文件的优点

    本篇文章由:http://xinpure.com/advantages-of-php-file-write-put-contents-to-a-file/ 写入方法的比较 先来看看使用 fwrite ...

  9. 【转帖】Servlet 3.0 新特性详解

    http://www.ibm.com/developerworks/cn/java/j-lo-servlet30/ Servlet 3.0 新特性概述 Servlet 3.0 作为 Java EE 6 ...

  10. 部署NopCommerce商城系统问题整理

    NopCommerce是一个很棒的开源商城系统,下面整理一下我在部署使用NopCommerce系统中的一些问题. 我使用的是NopCommerce3.9版本. 1.安装 安装教程网上很多,这里不细说, ...