zoukankan      html  css  js  c++  java
  • jQuery显示隐藏div的几种方法

    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.两者的区别是前者隐藏后不占空间,而后者隐藏后会占空间

    例:

    [javascript] view plain copy
     
      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.   
      12.   
      13.     function hiddenDiv1(){  
      14.       $("#test1").hide();  
      15.     }  
      16.   
      17.     function hiddenDiv2(){  
      18.       $("#test2").attr("style","visibility:hidden");  
      19.     }  
      20.   
      21.   </script>  
      22. </head>  
      23. <body>  
      24.   <div id="test1" style="display:none">aaaaaa</div>  <%--隐藏的div--%>  
      25.   <div  id="test2" style="visibility: hidden">bbbbb</div>  <%--隐藏的div--%>  
      26.   
      27.   <button onclick="showDiv1()">显示1</button>  
      28.   <button onclick="showDiv2()">显示2</button>  
      29.   <button onclick="hiddenDiv1()">隐藏1</button>  
      30.   <button onclick="hiddenDiv2()">隐藏2</button>  
      31. </body>  
      32.    
  • 相关阅读:
    云架构师进阶攻略(1)
    针对云主机卡死问题的定位分析方法
    让App飞久一点
    OC静态代码检查实战
    PAT 1010. 一元多项式求导
    PAT 1009. 说反话
    PAT 1008 数组元素循环右移问题
    PAT 1007. 素数对猜想
    PAT 1006 换个格式输出整数
    PAT 1005 继续(3n+1)猜想
  • 原文地址:https://www.cnblogs.com/apolloren/p/9190090.html
Copyright © 2011-2022 走看看