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. virtualbox, vt-s, rmmod kvm-intel

    http://blog.sina.com.cn/s/blog_4e7b97f00100fltu.html装完后,去下个jdk,坑爹的Oracle非要让老子注册,试了几次都没有成功,密码不合格拉,邮箱已 ...

  2. httpwebrequest 模拟登录 获取cookies 以前的代码,记录备忘!

    2个类,一个基类,一个构建头信息调用类 关于如何获取到post中的内容,你之需要用http抓包工具把你与目标网站的请求信息抓下来后,打开分析下按照抓下来的包中的数 据进行构建就行了 using Sys ...

  3. Android------自定义ListView详解

    引自:http://www.cnblogs.com/phonegap/archive/2011/04/28/2535732.html 在这里我就对自定义ListView进行讲解下吧,直入真题吧,首先我 ...

  4. 设置自己Eclipse代码风格（内部）

    经过这几次的代码提交,发现很多人的代码风格不够规范.个人认为很有必要强制性规定一下代码的规范. 整体来说,有三种代码风格,其中两种类似于这样的: public void function(){ //f ...

  5. ecstore中kvstore之mongodb

    mongodb安装 详细见 http://blog.csdn.net/motian06/article/details/17560067 mongodb扩展安装 详细见 http://blog.csd ...

  6. JSTL select和checkbox的用法

    select的 用法 <select id="roleIds" name="roleIds" multiple="true" back ...

  7. rsync+inotify实现数据的实时备份

    一.rsync概述 1.1.rsync的优点与不足 rsync与传统的cp.tar备份方式相比,rsync具有安全性高.备份迅速.支持增量备份等优点,通过rsync可以解决对实时性要求不高的数据备份需 ...

  8. 完美解决ie浏览器location.href不刷新页面的问题，进入页面只刷新一次

    /* ie不刷新列表bug */try{ var agent = navigator.userAgent.toLowerCase(); var ieflag = /(msie\s|trident.*r ...

  9. iOS之NSDictionary和NSArray以及NSMutableDictionary和NSMutableArray：将不再是问题

    字典的key就相当于数组的下标,怎样操作数组你就学会了怎样才做字典:来感受一把 需要注意的是读取文件的类型要集合.plist文件的rooty:否则将不能读入文件 // 1.全国省市:得到的是省和市 / ...

  10. SpringMVC轻松学习-其他常用（四）

    Spring MVC 3.0 深入 核心原理 1.      用户发送请求给服务器.url:user.do 2.      服务器收到请求.发现DispatchServlet可以处理.于是调用Disp ...