显示隐藏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 ...

随机推荐

LeetCode题解之 Longest Common Prefix
1.题目描述 2.问题分析直接使用循环解决问题 3.代码 string longestCommonPrefix(vector<string>& strs) { string re ...
反向代理负载均衡调度：nginx
一.概述反向代理:以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个 ...
Angular 服务的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
ASA5520远程配置 telnet,ssh
telnet配置: ASA5520(config)# passwd asa5520 //创建用户模式密码ASA5520(config)# enable password asa5520 //创建特权模 ...
python基础学习22----协程
协程,又称微线程.英文名Coroutine. 协程最大的优势就是协程极高的执行效率.因为子程序切换不是线程切换,而是由程序自身控制,因此,没有线程切换的开销,和多线程比,线程数量越多,协程的性能优势就 ...
15 Top Paying IT Certifications In 2016: AWS Certified Solutions Architect Leads At $125K
Each of the five Amazon Web Services (AWS) certifications brings in an average salary of more than $ ...
在 Virtual Box 中为 CentOS7 mini 配置双网卡
1. 配置过程 1.1 需求分析要同时满足虚拟机访问互联网和远程连接,需要配置两块网卡. 一块为 NAT 网络,这块用来访问互联网. 另一块为 Host-Only 网络,进行远程连接. 1.2 ...
linux操作系统基础讲解
计算机的组成及功能: 现在市场上的计算机组成结构遵循冯诺依曼体系,由CPU.内存.I/O设备,存储四大部分组成. CPU是整个计算机的核心部件,主要由运算器和控制器组成,它负责整个计算机的程序运行以 ...
【转】为什么Github没有记录你的Contributions
【转】为什么Github没有记录你的Contributions 字数985 阅读0 评论0 喜欢0 记录下为什么github 提交的时候，没有记录到 github 的那个日历上。 Paste_Imag ...
SDN期末作业——负载均衡
作业链接期末作业 1.负载均衡程序代码 2.演示视频地址 3.小组分工小组:incredible five 构建拓扑:俞鋆编写程序:陈绍纬.周龙荣程序调试和视频录制:陈辉.林德望 4.个人 ...

显示 隐藏DIV的技巧