你的位置:首页 > Java教程

[Java教程]点击按钮实现隐藏和显示的切换代码

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

 

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><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中,之所以使用的目的是让obj.style.display语句能够获取属性值,否则第一次点击无法将div设置为隐藏,大家可以去掉做一下测试。return false语句是为了防止链接的跳转效果。
二.相关阅读:
1.return false可以参阅javascript中return false的作用是什么一章节。 
2.getElementById()函数可以参阅document.getElementById()用法详解一章节。 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11714

更多内容可以参阅:http://www.softwhy.com/javascript/