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. Logcat过滤及常见用法整理

    Usage: logcat [options] [filterspecs] options include:-s              Set default filter to silent.  ...

  2. Android蓝牙传感应用（转）

    源:http://www.cnblogs.com/xiaochao1234/p/3753538.html Android手机一般以客户端的角色主动连接SPP协议设备(接上蓝牙模块的数字传感器),连接流 ...

  3. zf-关于SYS_User表type的分类

    type=1 表示管理员 type=2 表示领导 type=3 表示非领导

  4. a href="javascript:void(0)" 是什么意思？加不加上有什么区别？

    <A href="javascript:void(0)">点击</a>点击链接后不会回到网页顶部<A href="#">点击 ...

  5. 关于SVN 提交一半卡死的问题

    解决方案 1:将项目刷新一下 2:然后在到 project - clean 一下项目 3:之后提交svn 不过暂时不能确认 要等下方进度条的 svn更新状态完成 在点击确认进行提交 4:Buildin ...

  6. audio,video标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  7. 快速搭建本地HTTP服务器

    我们都知道,可以通过浏览器直接打开HTML文件来查看可视化的效果,但这种方式有一些局限性.比如我们在做手机端适配的时候,无法直接查看手机端的效果等.为了不受此类限制,强烈建议搭建一个本地的HTTP服务 ...

  8. CSS之基础

    css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化.存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式对优缺点. 语法:style ＝ &quo ...

  9. PHP 反射应用之一（插件框架）

    http://www.zui88.com/blog/view-205.html 反射,非常有用的一套东西,用来在运行时,分析代码,分析类的属性,方法,参数,实例化类,调用类的方法等等,从而实现框架,实 ...

  10. C++异常(exception)第三篇-------如何释放资源（没有finally语句）

    问题: C++中没有finally,那么应该在哪里关闭资源? C++的try{}catch(){},为什么没有finally{}块来释放资源? 如类中的一个方法,局部变量 File * file=NU ...