600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > PHP js 点击按钮 切换模版 javascript点击按钮实现隐藏显示切换效果_javascript技巧...

PHP js 点击按钮 切换模版 javascript点击按钮实现隐藏显示切换效果_javascript技巧...

时间:2019-08-28 01:25:13

相关推荐

PHP js 点击按钮 切换模版 javascript点击按钮实现隐藏显示切换效果_javascript技巧...

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

效果图:

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

隐藏和显示

显示\隐藏切换

脚本之家欢迎您

以上代码实现了我们的要求,点击顶部链接可以实现div显示和隐藏的切换,下面介绍一下它的实现过程。

实现原理:

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

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

发布php中文网,转载请注明出处,感谢您的尊重!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。