JS——覆盖显示，点击显示三层
<!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——覆盖显示，点击显示三层的更多相关文章
- js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...
- 基于js原生封装的点击显示完整文字
基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...
- JS点击显示隐藏内容
JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...
- js点击显示隐藏
这个栗子…… 可以不吃,先预设一个变量表示div的状态,例子中0是显示的,一开始是隐藏的.当点击时判断状态是显示0的还是隐藏1的:如果是显示的就把div隐藏,再把变量改变为1.再次点击时把会判断到变量 ...
- Firebug中调试中的js脚本中中文内容显示为乱码
Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...
- jQuery 点击显示再次点击隐藏
<html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...
- HTML5--》点击显示隐藏内容
<details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...
- 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+
Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...
- jQuery - 制作点击显示二级菜单效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏
JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏 window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 基本语法: ...
随机推荐
- 大气散射 Aerial Perspective
http://mathinfo.univ-reims.fr/IMG/pdf/PreethamSig2003CourseNotes.pdf https://blog.csdn.net/toughbro/ ...
- 标准C++ I/O库 迭代器让数据自由流动 V8
IO库的组成 三种流 C++的IO库以流对象为实体.主要有三种流: (1)标准输入输出流 (2)文件输入输出流 (3)字符串输入输出流 流迭代器 输入输出流迭代器 instream_iterator& ...
- Android中为你的应用程序添加桌面快捷方式
public void ShortCut(View view){ createDeskShortCut(this,getString(R.string.short_cut),R.drawable.up ...
- Android Exception 12(has leaked ServiceConnection)
09-09 15:12:31.154: E/ActivityThread(18855): Activity com..xxx.xx.act.LoadingAct has leaked ServiceC ...
- 库会因为权限问题无法打开——selinux开启严格模式
第三方库会因为提高selinux权限等级而无法打开,若使用setenforce 0可以打开则可确认.需要增加相应权限.修改te权限. 查看SELinux状态: 1./usr/sbin/sestatus ...
- marquee.js
图片无缝滚动工具类 CreateTime--2018年3月7日17:11:03 Author:Marydon /** * 图片无缝滚动 * @description * 将要滚动的图片复制一份作为 ...
- 在进程中执行新代码 execl、execle、execlp、execv、execve和execvp函数
摘要:本文主要讲述怎样在进程中执行新代码,以及exec系列函数的基本用法. 在进程中执行新代码 用函数fork创建子进程后,假设希望在当前子进程中运行新的程序,能够调用exec函数运行还有一个程序.当 ...
- Spring Boot（二）Application events and listeners
一.自定义监听器: 1.创建: META-INF/spring.factories 2.添加: org.springframework.context.ApplicationListener=com. ...
- 尚学堂 hadoop
mr spark storm 都是分布式计算框架,他们之间不是谁替换谁的问题,是谁适合做什么的问题. mr特点,移动计算,而不移动数据. 把我们的计算程序下发到不同的机器上面运行,但是不移动数据. 每 ...
- 用 WebSocket 实现一个简单的客服聊天系统
一 需求 一个多商家的电商系统,比如京东商城,不同商家之间的客服是不同的,所面对的用户也是不同的.要实现一个这样的客服聊天系统,那该系统就必须是一个支持多客服.客服一对多用户的聊天系统. 二 思路 使 ...