本文从学习角度出发,仅当做笔记。高手可以忽略本文。

借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间。

js控制显示和隐藏的代码:

 <script type="text/javascript">
function showDiv(obj){
document.getElementById(obj).style.display="";
//alert('已经显示');
}
function hideDiv(obj){
document.getElementById(obj).style.display="none";
//alert('已经隐藏');
}
</script>

HTML:

     <input name="btnShow" type="button" value="显示" onClick="showDiv('div1');">
<input name="btnHide" type="button" value="隐藏" onClick="hideDiv('div1');">
<div id="div1" style=" width:300px; height:200px; border:1px solid red;">
show it
</div>

这个有时候在界面的设计上会用得到。

div的显示和隐藏的更多相关文章

  1. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

  2. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  3. jquery怎么实现点击一个按钮控制一个div的显示和隐藏

    示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...

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

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

  5. 简简单单,jquery中,使用checkbox控制div的显示与隐藏

    今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...

  6. javascript实现div的显示和隐藏

    http://www.cnblogs.com/oec2003/archive/2007/05/05/736492.html <html> <head> <meta htt ...

  7. js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标

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

  8. js div的显示和隐藏

    <head>    <title></title>    <style type="text/css">        div    ...

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

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

随机推荐

  1. setColorFilter()滤镜

    ----------转载于:http://blog.sina.com.cn/s/blog_5da93c8f01012pkj.html 通过setColorFilter可以实现滤镜效果. 如:     ...

  2. oracle sql 优化

    2. 选择最有效率的表名顺序(只在基于规则的优化器中有效) ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,因此FROM子句中写在最后的表(基础表 driving table)将被最先 ...

  3. 转: Vue.js——60分钟组件快速入门(上篇)

    转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇)   组件简介 组件系统是Vue.js其中一个重要的概 ...

  4. UNIX-LINUX编程实践教程->第八章->实例代码注解->写一个简单的shell

    一 分析 要实现一个shell,需包含3个步骤 1)读入指令 2)指令解析 3)执行指令 1 从键盘读入指令 从键盘读入指令的几个要点: 1)调用getc函数等待并获取用户键盘输入. 2)每一行命令的 ...

  5. css实现一段不够一行时居中显示,多于一行时两端对齐

    今天有遇到这个问题,不够一行要居中才好看,多于一行居中又很难看: 居中 两端对齐 一开始想用text-align-last:center; 可是这样结果是这样的: 单行的居中了 可是多行的最后一行也居 ...

  6. Windows Store App 插值动画

    插值动画支持DoubleAnimation.ColorAnimation和PointAnimation类型的动画.其中比较常用的是DoubleAnimation动画,它可以用来控制界面元素的Doubl ...

  7. PHP内置函数file_put_content(),将数据写入文件,使用FILE_APPEND 参数进行内容追加

    file_put_contents(fileName,data,flags,context) 入参说明: 参数 说明 fileName 要写入数据的文件名 data 要写入的数据.类型可以是 stri ...

  8. OC面向对象—继承

    OC面向对象—继承 一.基本概念 程序的世界和人类的“对象”世界在思想上是没有设么区别的,富二代继承了父母,自然就拥有了父母拥有的所有资源,子类继承了父类同样就拥有了父类所有的方法和属性(成员变量). ...

  9. sqlite以及python的应用

    有点乱,自己平时,遇到了就记下来,所以没整理. 数据库sqlite,以及Qt对数据库的操作 sql学习网址: sqlite官网:http://www.sqlite.org http://www.w3s ...

  10. FileWriter和FileReader简单使用

    FileWriter和FileReader使用 package com.main.test; import java.io.FileNotFoundException; import java.io. ...