JavaScript:隐藏、显示div

参考网址:https://www.cnblogs.com/qingsong/p/5365218.html

div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 

1

2

3

4

5

style="visibility: none;"

 

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

 

document.getElementById("typediv1").style.visibility="visible";//显示

 通过设置display属性可以使div隐藏后释放占用的页面空间如下 

1

2

3

4

5

style="display: none;"

 

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

 

document.getElementById("typediv1").style.display="block";//显示

 此JS代码中,没有用try——Catch捕获错误,代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

<script language="javascript">

//创建一个showhidediv的方法,直接跟ID属性

function showhidediv(id){

var sbtitle=document.getElementById(id);

if(sbtitle){

   if(sbtitle.style.display=='block'){

   sbtitle.style.display='none';

   }else{

   sbtitle.style.display='block';

   }

}

}

</script>

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

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

做两个层之间的切换: 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<script language="javascript">

//创建一个showhidediv的方法,直接跟ID属性

function showhidediv(id){

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

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

if (id == 'name') {

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

    age.style.display='none';

    name.style.display='block';

   }

else {

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

    name.style.display='none';

    age.style.display='block';

   }

}  

}

</script>

<div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name:</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age:</div>

<div id="msg_1" style="display:none;float:left;">林雨林</div>

<div id="msg_2" style="display:none;float:left;">18</div>

 //示例二 

显示一个层的同时隐藏另一个层 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

<html>

 

<head>

 

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

 

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

 

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

 

<!--

 

function showhidediv(id){

 

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

 

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

 

if (id == 'name') {

 

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

 

    age.style.display='none';

 

    name.style.display='block';

 

   }

 

else {

 

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

 

    name.style.display='none';

 

    age.style.display='block';

 

   }

 

}  

 

}

 

-->

 

</script>

 

</script>

 

</head>

 

<body>

 

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

 

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

 

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

 

<form id="">

 

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

 

<div class="">

 

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

 

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

 

</div>

 

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

 

</div>

 

</body>

 

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值