jQuery显示隐藏div的几种方法

天涯浪子 提交于 2020-03-03 02:50:00

 

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.  
  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>

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!