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

$("#demo").attr("style","display:block;");//显示div

2、$("#demo").css("display","none");//隐藏div

$("#demo").css("display","block");//显示div

3、$("#demo").hide();//隐藏div

$("#demo").show();//显示div

4、$("#demo").toggle(//动态显示和隐藏

function () {

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

},

function () {    $(this).attr("style","display:block;");//显示div

}

);

<div id="demo"></div>

注：

$("#demo").show()表示display:block, 
$("#demo").hide()表示display:none;

1和2中的display:none可以换成visibility:hidden，display:block可以换成visibility:visible.两者的区别是前者隐藏后不占空间，而后者隐藏后会占空间

例：

    1. <script type="text/javascript">
    2. function showDiv1(){
    3. //$("#test1").attr("style","display:block");
    4. //$("#test1").show();
    5. $("#test1").css("display","block");
    6. }
    7. function showDiv2(){
    8. //$("#test2").attr("style","visibility:visible");
    9. $("#test2").css("visibility","visible");
    10. }
    11. function hiddenDiv1(){
    12. $("#test1").hide();
    13. }
    14. function hiddenDiv2(){
    15. $("#test2").attr("style","visibility:hidden");
    16. }
    17. </script>
    18. </head>
    19. <body>
    20. <div id="test1" style="display:none">aaaaaa</div>  <%--隐藏的div--%>
    21. <div  id="test2" style="visibility: hidden">bbbbb</div>  <%--隐藏的div--%>
    22. <button onclick="showDiv1()">显示1</button>
    23. <button onclick="showDiv2()">显示2</button>
    24. <button onclick="hiddenDiv1()">隐藏1</button>
    25. <button onclick="hiddenDiv2()">隐藏2</button>
    26. </body>

jQuery显示隐藏div的几种方法的更多相关文章

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

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

  2. jquery中隐藏div的几种方法

    //jQuery中的显示.隐藏方法 $("#id").show()://表示display:block,    $("#id").hide()://表示disp ...

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

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

  4. jQuery显示隐藏动态效果的几种写法

    <script type="text/javascript"> $(document).ready(function() {     /*$("#test1& ...

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

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

  6. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  7. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  8. jquery mobile切换页面的几种方法

    jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...

  9. CSS中隐藏内容的3种方法

    CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...

随机推荐

  1. XXX_initcall()函数分析

    1. 先看这些宏的定义(定义在文件include/linux/init.h中) #define pure_initcall(fn) __define_initcall("0",fn ...

  2. P4016 负载平衡问题(最小费用最大流)

    P4016 负载平衡问题 题目描述 GG 公司有 nn 个沿铁路运输线环形排列的仓库,每个仓库存储的货物数量不等.如何用最少搬运量可以使 nn 个仓库的库存数量相同.搬运货物时,只能在相邻的仓库之间搬 ...

  3. linux下操作用户相关

    一.添加用户 adduser test 二.为新添加用户设置密码 passwd test 根据提示输入两次密码 三.为用户配置免密码sudo权限 配置/etc/sudoers文件即可,过程如下 chm ...

  4. c#使用 StackExchange.Redis 封装 RedisHelper

    公司一直在用.net自带的缓存,大家都知道.net自带缓存的缺点,就不多说了,不知道的可以查一查,领导最近在说分布式缓存,我们选的是redis,领导让我不忙的时候封装一下,搜索了两天,选了选第三方的插 ...

  5. CF666E Forensic Examination——SAM+线段树合并+倍增

    RemoteJudge 题目大意 给你一个串\(S\)以及一个字符串数组\(T[1...m]\),\(q\)次询问,每次问\(S\)的子串\(S[p_l...p_r]\)在\(T[l...r]\)中的 ...

  6. 不同显卡对mrt 的支持

    ios bits限制大概512bits 低端256bits mali 也是bits限制 2017年 Mali-T760 128bits adreno android显卡4 肯定可以 因为deferre ...

  7. SparkStreaming使用checkpoint存在的问题及解决方案

    sparkstreaming关于偏移量的管理 在 Direct DStream初始化的时候,需要指定一个包含每个topic的每个分区的offset用于让Direct DStream从指定位置读取数据. ...

  8. redis geo操作

    package club.newtech.qbike.trip.domain.service; import club.newtech.qbike.trip.domain.core.Status;im ...

  9. Elasticsearch: Index template

    Index template定义在创建新index时可以自动应用的settings和mappings. Elasticsearch根据与index名称匹配的index模式将模板应用于新索引.这个对于我 ...

  10. HDU 6076 - Security Check | 2017 Multi-University Training Contest 4

    /* HDU 6076 - Security Check [ DP,二分 ] | 2017 Multi-University Training Contest 4 题意: 给出两个检票序列 A[N], ...