<!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. WAMPServer 默认安装启动后，图标显示橙黄色

    说明:我是在家的电脑上面学习的WAMPServer的,而家的电脑很干净.这次来学校以后,实验室的电脑被我经常的折磨,今天在安装以后,启动后,发现图标有红色到黄色,就停止了.其实,问题的根源很简单,某个 ...

  2. Asp.net MVC 中Ajax的使用 [分享]

    文章转自 http://www.huiyoumi.wang/upload/forum.php?mod=viewthread&tid=75&extra= Asp.net MVC 抛弃了A ...

  3. VM~Linux联不上网

    使用桥接的链接方式,centos6.4配置静态ip,能ping通网关,但ping 外网时出现 "network is unreachable" 如:ping www.baidu.c ...

  4. Atitit USRqc62204 证书管理器标准化规范

    Atitit USRqc62204 证书管理器标准化规范 /atiplat_cms/src/com/attilax/cert/CertSrv4mv.java /** * */ package com. ...

  5. 简单的JPA注解例子

    package ssh.entity; import java.math.BigDecimal; import java.util.Date; import javax.persistence.*; ...

  6. 转 - ubuntu apache2下目录结构

    ubuntu apache2下目录结构 原文:http://blog.csdn.net/jibcy/article/details/8060651 在Windows下,Apache的配置文件通常只有一 ...

  7. 18．实现如下类之间的继承关系，并编写Music类来测试这些类。

    package zhongqiuzuoye; public class Instrument { public void play() { System.out.println("弹奏乐器& ...

  8. linux安全检查

    1 ssh后门 检察语句: grep -E "user,pas|user:pas" /usr/bin/* /usr/local/sbin/* /usr/local/bin/* /b ...

  9. Orlion个人博客 | 全栈工程师之路-www.orlion.ga

    自己用wordpress+bootstrap搭建了一个博客,网址http://www.orlion.ga,用来记录博主学习和成长,主要关注JAVA.LANMP.前端与客户端(Android).算法与数 ...

  10. SQL*Loader之CASE2

    CASE2 1. 控制文件 [oracle@node3 ulcase]$ cat ulcase2.ctl -- NAME -- ulcase2.ctl - SQL*Loader Case Study ...