显示隐藏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题解之Happy Number
1.题目描述 2.题目分析根据 happy number 的性质,如果循环7次还没有到达 1,则这个数不是happy number . 3.代码 bool isHappy(int n) { ) r ...
Visual Studio Code配置Python环境
安装环境python环境变量,这个就不写了,这类文章一抓一大把,这类就省略了······· 在Visal Studil Code中配置python环境,其实跟我的上一篇文章一样,如图: 这里有两个选择 ...
Visual Studio 2010详细安装过程
Visual Studio 2010在目前看来,应该是使用得比较多的一款微软的软件开发工具集合了,因为它具有以下优点:(1)启动速度快:在相同环境下,相比于Visual Studio 2015来说,2 ...
【QT5】第一个hello world 程序
#include <QApplication> #include <QWidget> #include <QPushButton> int main(int arg ...
git 学习汇总
生成gitignore 文件: https://gitignore.io/ git 版本回退 git reset --hard HEAD^ 上一个版本就是HEAD^,上上一个版本就是HEAD^^,当然 ...
mysql用户管理与权限
1.设置密码 set password for 用户名@localhost = password('密码'); 2.取消密码 set password for 用户名@localhost = pass ...
AngularJS 中<a> 超链接标签不起作用？
开始时遇到个问题,单页应用<a>元素链接点击就是不跳转页面,使用超链接标签<a href='group'>click</a> 不起作用. 解决方法: 如果你不巧配置 ...
【Alpha 冲刺】 3/12
今日任务总结 (未完成) 人员今日原定任务完成情况遇到问题贡献值胡武成完成API文档编写已完成App端api,Web端api还在持续时间紧孙浩楷理解掌握在线编辑插件使用加深了对所 ...
团队作业——Alpha冲刺 11/12
团队作业--Alpha冲刺冲刺任务安排杨光海天今日任务:预览界面布局实现,并留下交互接口明日任务:预览界面中自定义保存的实现郭剑南今日任务:尝试解决Python编写程序无法在Android ...
RLP（转发注明出处）
目录 RLP序列化什么是序列化? 为什么要序列化? RLP序列化处理的两项数据 RLP序列化采取的5项规则: 利用python写的RLP 实际中的使用是个怎么样子? RLP分析参考目录 @ RLP ...

显示 隐藏DIV的技巧