显示隐藏DIV的技巧

使用bootstrap的12分栅来演示

style="display: none;" 隐藏后释放占用的页面空间

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

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

　　　　　　　　　　　　　　　　  <div class="form-group">

                                <div class="col-lg-3 col-sm-6">

                                    <label class="col-sm-4 control-label">{{taskId}}</label>

                                    <div class="col-md-8">

                                        <input type="text" id="xxx" class="form-control">

                                    </div>

                                </div>

                                <div class="col-lg-3 col-sm-6"  style="display:none;">

                                    <label class="col-sm-4 control-label">{{msgId}} </label>

                                    <div class="col-sm-8" 　 >

                                        <input type="text" id="xxx" class="form-control">

                                    </div>

                                </div>

                                <div class="col-lg-3 col-sm-6">

                                    <label class="col-sm-4 control-label">{{createTime}}</label>

                                    <div class="xxx   input-group col-sm-8" >

                                        <input type="text" id="xxx" class="xxx">

                                        <span class="input-group-addon">

                                            <i class="fa fa-clock-o bigger-110"></i>

                                        </span>

                                    </div>

                            </div>

                            <div class="col-lg-3 col-sm-6">

                                <label class="col-sm-4 control-label">{{to}}</label>

                                <div  class="xxxe input-group col-sm-8">

                                    <input id="xxx"

                                        class="xxx">

                                    <span class="input-group-addon"> <i

                                        class="fa fa-clock-o bigger-110"></i>

                                    </span>

                                </div>

                            </div>

                       </div>

style="visibility:hidden;" 隐藏后不释放空间

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

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

　　　　　　　　　　　　　　　　　　<div class="form-group">

                                <div class="col-lg-3 col-sm-6">

                                    <label class="col-sm-4 control-label">{{taskId}}</label>

                                    <div class="col-md-8">

                                        <input type="text" id="xxx" class="form-control">

                                    </div>

                                </div>

                                <div class="col-lg-3 col-sm-6"  style="visibility:hidden;">

                                    <label class="col-sm-4 control-label">{{msgId}} </label>

                                    <div class="col-sm-8" 　 >

                                        <input type="text" id="xxx" class="form-control">

                                    </div>

                                </div>

                                <div class="col-lg-3 col-sm-6">

                                    <label class="col-sm-4 control-label">{{createTime}}</label>

                                    <div class="xxx input-group col-sm-8" >

                                        <input type="text" id="xxx" class="form-control xxx">

                                        <span class="input-group-addon">

                                            <i class="fa fa-clock-o bigger-110"></i>

                                        </span>

                                    </div>

                            </div>

                            <div class="col-lg-3 col-sm-6">

                                <label class="col-sm-4 control-label">{{to}}</label>

                                <div  class="xxx input-group col-sm-8">

                                    <input id="xxx"

                                        class="form-control xxx">

                                    <span class="input-group-addon"> <i

                                        class="fa fa-clock-o bigger-110"></i>

                                    </span>

                                </div>

                            </div>

                       </div>

显示隐藏DIV的技巧的更多相关文章

HTML 显示/隐藏DIV的技巧(visibility与display的差别)
参考链接:http://blog.csdn.net/szwangdf/article/details/1548807 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: ...
点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
锋利的Jquery(点击显示隐藏div)
点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
[jquery]显示隐藏div标签的几种方法
1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...
JQuery - 垂直显示隐藏DIV
效果: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFor ...
js jQuery显示隐藏div的几种方法
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_36135335/article/d ...
jQuery显示隐藏div的几种方法
1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...
JS 显示隐藏DIV
JS关闭DIV HTML <div id="bar1"> <p onclick="removeElement('bar1')">关闭&l ...

随机推荐

Angular 服务的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
安装SQL sever2008时显示重新启动计算机规则失败，应该怎么解决？
1.删除注册表:在HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager中找到 PendingFileRenameOpe ...
pt-heartbeat --update --daemonize 只执行一次秒退的问题
使用pt-heartbeat帮助测试MySQL从库delay时长- 第一次运行测试成功,运行顺畅. 过几天再次用--update测试时,发现pt-heartbeat只update一次就自己退出了,-- ...
history历史记录控制
往往我们操作的每一条命令都会被机器记录下来,所有我们为了安全需要屏蔽掉某些敏感的操作命令. 设置linux默认的历史记录数: 临时生效: export HISTSIZE=5 history 永久生效 ...
MySQL 的 CURD 操作
0. 说明 CURD 操作通常是使用关系型数据库系统中的结构化查询语言(Structured Query Language,SQL)完成的 CURD 定义了用于处理数据的基本原子操作 CURD 代表创 ...
MPT树详解
目录 MPT树定义 MPT树的作用是什么? 前缀树与默克尔树前缀树默克尔树三种节点类型 MPT中的Merkle HP编码官方表示形式相关MPT树参考目录 @ MPT树定义一种经过改良的. ...
经典Paxos算法笔记
介绍 Paxos算法是一个高容错性的分布式一致性算法.去年学习过Paxos算法,一直没将整理到博客.现在将经典Paxos算法相关内容整理到博客上. 经典Paxos算法本身也并不是太难理解,Lampor ...
3.HBase In Action 第一章-HBase简介（1.1.1 大数据你好呀）
Let's take a closer look at the term Big Data. To be honest, it's become something of a loaded term, ...
M100(3) 无线数传
本文记录了无线数传配合地面Windos qt写的飞机控制SDK软件的使用过程使用了两种类型无线数传遇到问题 1 界面卡死问题 1.1 数传问题问题描述: 使用非官方数传,点击active按键和一 ...
MetaMask/provider-engine-2-代码
package.json "main": "index.js", "scripts": { "test": " ...

显示 隐藏DIV的技巧