<!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. 看svn用户组管理功能的产品设计

    我负责公司的svn配置.用了近一年了,今天饶有兴致,分享一下svn的用户组管理功能,这个产品设计值得借鉴,简单易用. svn用户组管理的功能描述:新建用户组,并给组分配成员用户:编辑用户组,包括修改组 ...

  2. Atitit 图像处理—图像形态学(膨胀与腐蚀)

    Atitit 图像处理-图像形态学(膨胀与腐蚀) 1.1. 膨胀与腐蚀1 1.2. 图像处理之二值膨胀及应用2 1.3. 测试原理,可以给一个5*5pic,测试膨胀算法5 1.4. Photoshop ...

  3. iOS-Delegate模式

    代理模式 顾名思义就是委托别人去做事情. IOS中经常会遇到的两种情况:在cocoa框架中的Delegate模式与自定义的委托模式.下面分别举例说明一下: 一.cocoa框架中的delegate模式 ...

  4. mybatis多对多映射

    数据库里面有角色实体类app_cms_role

  5. draggable属性设置元素是否可拖动。

    设置标签属性draggable="true"将一个标签内的元素拖动到另外一个标签进行显示: <!DOCTYPE HTML> <html> <head& ...

  6. Liferay7 BPM门户开发之46: 集成Activiti用户、用户组、成员关系同步

    在实际的BPM集成开发过程中,Liferay和Activiti这两个异构的系统之间,用户.组的同步需求非常重要,用来实现签收组的概念,比如指定签收组.会签.抢签都需要用到. Activiti可以通过自 ...

  7. DataGrid--多记录CRUD

    最近在做一个datagrid,但因为引用的Jquery,加上初学者,所以难免费尽周折.现在将完整版贴出来,跟大家分享,一起切磋,也方便自己回顾学习. ps:第一次发帖,不知排版效果如何,瑕疵勿怪. 首 ...

  8. js对象、数组转换字符串

    对象转换成字符串需要使用toString()方法. 1 var a = function(){ 2 console.log(111); 3 }; 4 var b = a.toString(); 5 c ...

  9. 【原创】探索Newlife X组件利器之：XCoder点滴[附下载]

    本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html Newlife XCode组件相关文章目录:http://www.cnblogs ...

  10. HTML5移动Web开发（三）——在移动网站中使用HTML5

    创建一个简单得HTML5页面ch01e2.html <html> <head> <meta name="viewport" content=" ...