实现点击按钮切换显示和隐藏效果



点击同一个按钮可以实现一个元素的显示和隐藏的切换，下面就通过代码实例介绍一下如何实现此效果，代码如下:

?

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语句是为了防止链接的跳转效果