请选择 进入手机版 | 继续访问电脑版
查看: 984|回复: 0

[JavaScript/JQuery] 如何用JavaScript(js)隐藏div和显示div

3万

主题

3万

帖子

10万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
100167
发表于 2016-11-8 15:07:47
如何用JavaScript(js)隐藏div和显示div?

1.div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白
  1. style="visibility: none;"

  2. document.getElementById("typediv1").style.visibility="hidden";//隐藏

  3. document.getElementById("typediv1").style.visibility="visible";//显示
复制代码
2.通过设置display属性可以使div隐藏后释放占用的页面空间如下
  1. style="display: none;"

  2. document.getElementById("typediv1").style.display="none";//隐藏

  3. document.getElementById("typediv1").style.display="";//显示
复制代码
此JS代码中,没有用try——Catch捕获错误,代码如下:
  1. <script language="javascript">
  2. //创建一个showhidediv的方法,直接跟ID属性
  3. function showhidediv(id){
  4. var sbtitle=document.getElementById(id);
  5. if(sbtitle){
  6.    if(sbtitle.style.display=='block'){
  7.    sbtitle.style.display='none';
  8.    }else{
  9.    sbtitle.style.display='block';
  10.    }
  11. }
  12. }
  13. </script>
复制代码

<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div,ID要下面的ID-->
<div id="msg" style="display:none;">出现显示的内容</div> <!--这里是MsgDiv-->

onMouseMove='showhidediv("msg")'; 这里是鼠标动作,可以替换成Click或其他!

做两个层之间的切换:
  1. <script language="javascript">
  2. //创建一个showhidediv的方法,直接跟ID属性
  3. function showhidediv(id){
  4. var age=document.getElementById("msg_2");
  5. var name=document.getElementById("msg_1");
  6. if (id == 'name') {
  7.    if (name.style.display=='none') {
  8.     age.style.display='none';
  9.     name.style.display='block';
  10.    }
  11. } else {
  12.    if (age.style.display=='none') {
  13.     name.style.display='none';
  14.     age.style.display='block';
  15.    }
  16. }   
  17. }
  18. </script>
  19. <div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name:</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age:</div>
  20. <div id="msg_1" style="display:none;float:left;">林雨林</div>
  21. <div id="msg_2" style="display:none;float:left;">18</div>
复制代码

//示例二

显示一个层的同时隐藏另一个层
  1. <html>

  2. <head>

  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  4. <title>无标题文档</title>

  5. <script language="JavaScript" type="text/JavaScript">

  6. <!--

  7. function showhidediv(id){

  8. var age=document.getElementById("msg_2");

  9. var name=document.getElementById("msg_1");

  10. if (id == 'name') {

  11.    if (name.style.display=='none') {

  12.     age.style.display='none';

  13.     name.style.display='block';

  14.    }

  15. } else {

  16.    if (age.style.display=='none') {

  17.     name.style.display='none';

  18.     age.style.display='block';

  19.    }

  20. }   

  21. }

  22. -->

  23. </script>

  24. </script>

  25. </head>

  26. <body>

  27. <div id="msg_1" style="display:block;float:left;" onclick='showhidediv("age")';>

  28. <p id="photoTitle" >单击此处添加描述</p></div>

  29. <div id="msg_2" style="display:none;float:left;" >

  30. <form id="">

  31. <textarea class="textarea" id="" name=""></textarea>

  32. <div class="">

  33. <input type="button" value="保存" class="" id="">

  34. <input type="button" value="取消" class="" id="" onclick='showhidediv("name")';>

  35. </div>

  36. <input type="hidden" name="" value=""></form>

  37. </div>

  38. </body>

  39. </html>
复制代码



回复

使用道具 举报