使用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的技巧的更多相关文章

  1. HTML 显示/隐藏DIV的技巧(visibility与display的差别)

    参考链接:http://blog.csdn.net/szwangdf/article/details/1548807 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: ...

  2. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  3. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  4. [jquery]显示隐藏div标签的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  5. JQuery - 垂直显示隐藏DIV

    效果: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFor ...

  6. js jQuery显示隐藏div的几种方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_36135335/article/d ...

  7. jQuery显示隐藏div的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  8. JS 显示隐藏DIV

    JS关闭DIV HTML <div id="bar1"> <p onclick="removeElement('bar1')">关闭&l ...

  9. 点击自动显示/隐藏DIV代码。(简单实用）

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字.这类效果在互联网上应用得很多,但实现的方 ...

随机推荐

  1. 使用动态SQL创建数据库

    /*其实我也搞不懂为什么要用SQL来创建,明明SQL Server有图形化创建数据库多省事啊!*/USE master; ​DECLARE @sqlstr nvarchar(max)/*定义一个变量* ...

  2. 转：C#综合揭秘——细说多线程（上）

    原文地址:http://www.cnblogs.com/leslies2/archive/2012/02/07/2310495.html 引言 本文主要从线程的基础用法,CLR线程池当中工作者线程与I ...

  3. JavaScript原型链基础(prototype chain)

    1.函数基础 2.对象基础 3.原型链基础

  4. MySQL基础之 统计函数总结

    五种统计函数:count().max().avg().min().max()函数 count()函数 count()函数在进行计算的时候,是分情况进行计算的,主要是一下两种 1.采用count(*)对 ...

  5. SA387Gr91

    SA387Gr91 在DTCMS中,我做了一个SA387Gr91的网站,挺好看的.

  6. 用AOP拦截自定义注解并获取注解属性与上下文参数（基于Springboot框架）

    目录 自定义注解 定义切面 获取上下文信息JoinPoint ProceedingJoinPoint 定义测试方法 测试结果 小结 AOP可以用于日志的设计,这样话就少不了要获取上下文的信息,博主在设 ...

  7. 洛谷P1803

    #include <iostream>#include <algorithm>#include <cstdio>using namespace std; struc ...

  8. XAML 布局StackPanel

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/Fanbin168/article/details/24768459 <Window x:Cla ...

  9. HTTP 请求头中的 X-Forwarded-For，X-Real-IP

     X-Forwarded-For 在使用nginx做反向代理时,我们为了记录整个的代理过程,我们往往会在配置文件中做如下配置: location / { 省略... proxy_set_header ...

  10. Linux之Vim学习

    Linux之Vim学习 一般模式 光标移动 按键 作用 j或down方向键 向下移动一个字符 k或up方向键 向上移动一个字符 h或left方向键 向左移动一个字符 l或right方向键 向右移动一个 ...