<!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=gb2312" />
<title>点击一个div隐藏另一个div</title> <script type="text/javascript">
function shwoOrHidden(){
if(document.getElementById("d1").style.display=='block'){
document.getElementById("d1").style.display='none';
document.getElementById("d2").style.display='block';
}else if(document.getElementById("d1").style.display=='none'){
document.getElementById("d1").style.display='block';
document.getElementById("d2").style.display='none';
}
}
</script>
</head>
<body>
<div id="d1" style="height:150px; width:150px; border:1px solid #009900; display:block; position:absolute;" onclick="shwoOrHidden()">
</div> <div id="d2" style="height:150px; width:150px; border:1px solid #FFFF00; display:none; position:absolute; left:200px;" onclick="shwoOrHidden()">
</div>
</body>
</html>

点击一个div隐藏另一个div的更多相关文章

  1. select下拉选中显示对应的div隐藏不相关的div

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  3. 点击一个按钮,如何让一个<div id=a>……</div>隐藏或显现?

    <div id=divid>123</div>< button onclick="usr()">Click</button>< ...

  4. 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  5. 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

    一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...

  6. jquery效果,多个div,点击任何一个div,那么这个div会切换文字,变换背景颜色,再次点击其他的div ,这个div会发生刚才的变化,之前点击的div的颜色会变回来

    首先css样式: /*原来的背景色*/ .bg { background:'red' } /*需要切换的背景色*/ .bg_click { background:'green' } JS: $('di ...

  7. 点击自动显示/隐藏DIV代码。(简单实用)

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字.这类效果在互联网上应用得很多,但实现的方 ...

  8. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  9. JaveWeb 公司项目(1)----- 使Div覆盖另一个Div完成切换效果

    最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...

随机推荐

  1. 《Effective Java》—— 对于所有对象都通用的方法

    本节主要涉及Object中通用的一些方法,比如equals,hashCode,toString,clone,finalize等等 覆盖equals时请遵守通用约定 equals方法实现的等价关系: 自 ...

  2. node.js 简介

    简介:     Node,是一个可以让 JavaScript 运行在服务器端的平台.它可以让 JavaScript 脱离浏览器的束缚运行在一般的服务器环境下     Node.js 是一个为实时Web ...

  3. 每天一个linux命令(50):crontab命令

    前一天学习了 at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个 ...

  4. 关于Ubuntu运行级别、开机启动脚本的说明

    关于Ubuntu运行级别.开机启动脚本的说明 目录简介 1.1介绍Ubuntu下面的自启动脚本目录 1.2 Linux操作系统运行级别的概念 1.3关于操作系统自启脚本的启动顺序 1.4    Lin ...

  5. 分享一个 C# Winfrom 下的 OutlookBar 控件的使用

    最近在上网的时候,发现了这个C# 下的 OutlookBar 控件,看了一下感觉还真不错,特此记录一下. using System; using System.Drawing; using Syste ...

  6. CSS颜色模式转换器的实现

    前面的话 在CSS中,颜色的表示方式主要包括关键字.16进制.RGB模式.RGBA模式.HSL模式.HSLA模式.关于颜色模式的详细信息移步至此.本文就16进制.RGB模式及HSL模式的互相转换进行实 ...

  7. java中并不是任意多个接口都可以实现多实现

    interface A{ public abstract void show(); } interface B{ public abstract int show(); } public class ...

  8. GDB 和 windbg 命令对照(转载)

    From:http://blog.csdn.net/joeleechj/article/details/10020501 命令                                      ...

  9. storm坑之---传递对象

    继之前遇到的那个同步问题的坑之后(storm坑之---同步问题),最近对代码又做了调整和重构,并且又遇到了另一个storm开发中应该值得警惕的坑.接下来说说这个坑的大体情况. 在我的storm程序中, ...

  10. c# 多线程系列二 自定义线程执行器

    看了第一篇文章,多线程系列,看到了在线程执行任务队列有了一定的了解~! 那么今天我来讲讲,怎么样构建通用的自定义线程概念! 线程执行任务,肯定要有目标,但是如果写死了,那么一个线程处理执行职能按照思路 ...