JS实现显示隐藏效果

weixin_46051617

于 2020-07-12 21:33:37 发布

阅读量1.5k

点赞数

分类专栏：选择器文章标签： js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/weixin_46051617/article/details/107305856

版权

选择器专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用JavaScript点击按钮实现元素显示与隐藏切换的代码实例。通过为链接注册onclick事件，根据div的style.display属性值动态调整元素的可见状态。当style.display为block时，切换为none隐藏；反之则显示。返回false防止链接默认行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文实例分享了点击按钮实现隐藏和显示的切换代码，供大家参考，具体内容如下

效果图：

在不少应用中，都有这样的功能，点击同一个按钮可以实现一个元素的显示和隐藏的切换，下面就通过代码实例介绍一下如何实现此效果，代码如下:

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

<html>

<head>

<meta charset="gb2312">

<title>隐藏和显示</title>

<style type="text/css">

#thediv

{

width:200px;

height:100px;

line-height:100px;

text-align:center;

background-color:green;

}

</style>

<script type="text/javascript">

function Show_Hidden(obj)

{

if(obj.style.display=="block")

{

obj.style.display='none';

}

else

{

obj.style.display='block';

}

}

window.onload=function()

{

var olink=document.getElementById("link");

var odiv=document.getElementById("thediv");

olink.onclick=function()

{

Show_Hidden(odiv);

return false;

}

}

</script>

</head>

<body>

<a href="#" id="link">显示\隐藏切换</a>

<div id="thediv" style="display:block">脚本之家欢迎您</div>

</body>

</html>

以上代码实现了我们的要求，点击顶部链接可以实现div显示和隐藏的切换，下面介绍一下它的实现过程。
实现原理：
为链接注册onclick事件处理函数，此处理函数可以判断div的style.display属性值，如果为block则将其设置为none，也就是将div设置为隐藏状态，否则设置为block，也就是将div设置为显示状态，原理大致如此。需要特别注意的是，在div中，之所以使用style="display:block"的目的是让obj.style.display语句能够获取属性值，否则第一次点击无法将div设置为隐藏，大家可以去掉style="display:block"做一下测试，return false语句是为了防止链接的跳转效果。

关于return false可以参考本文： 《学习jQuey中的return false》

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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