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

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

渲染：

在很多应用中，都有这样的功能。单击同一个按钮可以在显示和隐藏元素之间切换。在这里，我们将通过一个代码示例来介绍如何实现这种效果。代码如下：

html hearteta charset=' GB 2312 ' title hide and show/title style type=' text/CSS ' # the div { width :200 px；高度：100 px；线高：100 px；文本对齐：居中；背景-颜色：绿色；}/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(' disiv ')；olink . onclick=function(){ Show _ Hidden(odiv)；返回false} }/script/head body a href=' # ' id=' link ' display/hide switch/adiv id=' the div ' style=' display : block '我们欢迎您/div/body/html以上代码已经满足我们的要求。点击顶部链接，实现div显示和隐藏的切换。下面是如何实现的。实现原理：为链接注册onclick事件处理程序，可以判断div的style.display属性值。如果是block，设置为none，也就是将div设置为隐藏状态；否则，将其设置为block，即在显示状态下设置div。原理大致相同。特别是在div中，之所以使用style=' display3360block '是为了让obj.style.display语句获取属性值，否则第一次点击时无法将div设置为隐藏，可以取出style=' display 3360 block '进行测试，return false语句是为了防止链接的跳转效果。

如需退货，请参考本文：《学习jQuey中的return false》。

以上就是本文的全部内容，希望对大家的学习有所帮助。