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

借助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. spring-servlet.xml简单示例

    spring-servlet.xml简单示例 某个项目中的spring-servlet.xml 记下来以后研究用 <!-- springMVC简单配置 --> <?xml versi ...

  2. Head First 设计模式--1策略模式 组合优于继承

    策略模式:第一了算法族,分别封装起来,让他们之间可以互相替换,次模式让算法的变化独立于使用算法的客户. 首先看个错误的面向对象. 假如我们需要写一个关于鸭子的程序,各种类型的鸭子.第一想到的就是建一个 ...

  3. html 通用 遮罩弹出层 弹出后 支持跳转页面

    //showMessage 提示的内容默认为空必填 buttonText:按钮显示的内容默认为"确定" 传入 "" 为默认 url:跳转链接 传入"& ...

  4. 如何有效使用Project(2)——进度计划的执行与监控

    继上次的的<编制进度计划.保存基准>继续讲解如何对计划进行执行和监控. 计划执行即:反馈实际进度.反馈工作消耗(本文只考虑工时,不考虑成本).提出计划变更请求.如果你的企业实施了专门的PM ...

  5. $.getJSON( )的使用方法简介

    JSON(JavaScript Object Notation)即JavaScript对象表示法,是一种轻量级的数据交换格式.它非常便于编程人员对数据的处理,也便于机器对数据的解析和生成,应用非常广泛 ...

  6. c#网络通信框架networkcomms内核解析之九 自定义处理方法的运行机制

    NetworkComms网络通信框架序言 本文基于networkcomms2.3.1开源版本  gplv3协议 我们自己写的处理方法都称之为自定义处理方法 比如,我们在服务器上写的与登陆相关的处理方法 ...

  7. iOS开发UI篇—xib的简单使用

    iOS开发UI篇—xib的简单使用 一.简单介绍 xib和storyboard的比较,一个轻量级一个重量级. 共同点: 都用来描述软件界面 都用Interface Builder工具来编辑 不同点: ...

  8. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

  9. .htaccess根据IP地址限制访问

    屏蔽IP地址 屏蔽IP地址有时是非常必要的,比如对于一个外贸公司网站,来自国内的访问是不会带来任何经济效益的,而且还占用服务器资源,造成访问延迟等问题. 如果要屏蔽某一特定IP可以使用: order ...

  10. HDU 4939 Stupid Tower Defense (2014 Multi-University Training Contest 7)

    思路:首先红色肯定要放在最后面.前面蓝色和绿色dp求解. dp[i][j]  表示前面(i+j) 个 有 i 个蓝色塔  j个绿色塔 能造成最大伤害. //====================== ...