div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白

style="visibility: none;"

document.getElementById("typediv1").style.visibility="hidden";//隐藏

document.getElementById("typediv1").style.visibility="visible";//显示

通过设置display属性可以使div隐藏后释放占用的页面空间如下

style="display: none;"

document.getElementById("typediv1").style.display="none";//隐藏

document.getElementById("typediv1").style.display="";//显示

此JS代码中，没有用try——Catch捕获错误，代码如下：

<script language="javascript">

//创建一个showhidediv的方法，直接跟ID属性

function showhidediv(id){

var sbtitle=document.getElementById(id);

if(sbtitle){

   if(sbtitle.style.display=='block'){

   sbtitle.style.display='none';

   }else{

   sbtitle.style.display='block';

   }

}

}

</script>

<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div，ID要下面的ID--> 
<div id="msg" >出现显示的内容</div> <!--这里是MsgDiv-->

onMouseMove='showhidediv("msg")'; 这里是鼠标动作，可以替换成Click或其他！

做两个层之间的切换：

<script language="javascript">

//创建一个showhidediv的方法，直接跟ID属性

function showhidediv(id){

var age=document.getElementById("msg_2");

var name=document.getElementById("msg_1");

if (id == 'name') {

   if (name.style.display=='none') {

    age.style.display='none';

    name.style.display='block';

   }

} else {

   if (age.style.display=='none') {

    name.style.display='none';

    age.style.display='block';

   }

}

}

</script>

<div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name：</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age：</div>

<div id="msg_1" style="display:none;float:left;">林雨林</div>

<div id="msg_2" style="display:none;float:left;">18</div>

//示例二

显示一个层的同时隐藏另一个层

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function showhidediv(id){

var age=document.getElementById("msg_2");

var name=document.getElementById("msg_1");

if (id == 'name') {

   if (name.style.display=='none') {

    age.style.display='none';

    name.style.display='block';

   }

} else {

   if (age.style.display=='none') {

    name.style.display='none';

    age.style.display='block';

   }

}   

}

-->

</script>

</script>

</head>

<body>

<div id="msg_1" style="display:block;float:left;" onclick='showhidediv("age")';>

<p id="photoTitle" >单击此处添加描述</p></div>

<div id="msg_2" style="display:none;float:left;" >

<form id="">

<textarea class="textarea" id="" name=""></textarea>

<div class="">

<input type="button" value="保存" class="" id="">

<input type="button" value="取消" class="" id="" onclick='showhidediv("name")';>

</div>

<input type="hidden" name="" value=""></form>

</div>

</body>

</html>

利用JS做到隐藏div和显示div的更多相关文章

  1. CSS鼠标悬浮DIV后显示DIV外的按钮

    昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮. 效果如下: 问题: 在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题 ...

  2. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  3. 原生JS的移入溢出控制div的显示与隐藏

    原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性

  4. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  5. 用JS把复选框做成单选框,左显示div,右隐藏div

    <input type="checkbox" name="checkname" onclick="check(this)"/>左 ...

  6. JS——取消事件冒泡，实现div的显示与隐藏 event.cancelBubble = true;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 2.3点击菜单显示div再点击就隐藏

    事件:onclick 属性:display 利用if语句实现 <!DOCTYPE html><html><head><meta charset="u ...

  8. React 点击按钮显示div与隐藏div，并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  9. div的显示和隐藏

    本文从学习角度出发,仅当做笔记.高手可以忽略本文. 借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间. js控制显示和隐藏的代码: <script ty ...

随机推荐

  1. emacs command

    eval-buffer用来执行.emacs不要再重启了,或cxce执行光标前的一行 eval-region load-file ~/.emacs goto-line global-set-key定义快 ...

  2. HDU 1114 Piggy-Bank（判断是否恰好装满的背包）

    其实这道题在寒假自学训练赛的时候就做过,不过感觉现在的理解跟当时真的不一样,大一半年过去了,变了这么多,我们都在进步,一回头便走出了这么远... 好了,题目很简单,一个背包,装不满做一个标记就行了 # ...

  3. PAT (Advanced Level) 1067. Sort with Swap(0,*) (25)

    只对没有归位的数进行交换. 分两种情况: 如果0在最前面,那么随便拿一个没有归位的数和0交换位置. 如果0不在最前面,那么必然可以归位一个数字,将那个数字归位. 这样模拟一下即可. #include& ...

  4. PAT (Advanced Level) 1066. Root of AVL Tree (25)

    AVL树的旋转.居然1A了.... 了解旋转方式之后,数据较小可以当做模拟写. #include<cstdio> #include<cstring> #include<c ...

  5. eclipse工程名出现小红叉的解决办法

    前提是eclipse工程中每个子文件都没错,工程名上却显示了小红叉. 打开[Window]->[Show View]->[General]->[Problems],看看Problem ...

  6. NanoApe Loves Sequence Ⅱ(尺取法)

    题目链接:NanoApe Loves Sequence Ⅱ Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/131072 ...

  7. STM32开发指南-跑马灯实验

    简单对I/O口的控制,主要通过对寄存器的读写控制.主要通过I/O的寄存器来控制:1. 控制I/O的方向2. 控制I/O的输出电平或上下来电阻3. 存储I/O口当前的输入状态(高低电平) 对使用LED灯 ...

  8. higncharts 编辑Highcharts.com链接

    credits: {             text: 'Example.com',             href: 'http://www.example.com'          }, 只 ...

  9. MAC OSX 10.10 下安装PHP环境

    Apache和PHP已经在系统里面预装好了,只要你开启即可使用.这篇文章给大家介绍如何开启并设置好PHP开发环境. 1.开启默认Apache服务 打开终端命令行,输入如下命令就会开启Apache了.然 ...

  10. 导出WAS已部署的ear包的几种方法

    可以通过下面几种办法将部署好的工程导出为一个ear包. 1.最简单的,通过was的控制台导出: 首先登录控制台,进入"企业应用程序"管理页面,选中要导出的工程,点击"导出 ...