php点击按钮就隐藏,JavaScript_javascript点击按钮实现隐藏显示切换效果，本文实例分享了点击按钮实现 - phpStudy...

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

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

效果图：

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

隐藏和显示

#thediv

{

width:200px;

height:100px;

line-height:100px;

text-align:center;

background-color:green;

}

function Show_Hidden(obj)

{

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

{

obj.style.display='none';

}

else

{

obj.style.display='block';

}

}

window.οnlοad=function()

{

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

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

olink.οnclick=function()

{

Show_Hidden(odiv);

return false;

}

}

显示\隐藏切换

phpstudy欢迎您

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

实现原理：

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

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

创建你的第一个AngularJS应用的方法

win7安装Windows Live Mail出错0x80040154该怎么办?

Java 调整格式日志输出

Java线程编程中Thread类的基础学习教程

BootstrapTable+KnockoutJS相结合实现增删改查解决方案(三)两个Viewmodel搞定增删改查

win10日历中新事件不能处理该怎么办?

纯JavaScript基于notie.js插件实现消息提示特效

Java的Socket通讯基础编程完全指南

将 Ghost 从 SQLite3 数据库迁移到 MySQL 数据库

nodejs 的 session 简单使用

jquery转盘抽奖功能实现

JavaScript实现将数组数据添加到Select下拉框的方法

javascript 使用for循环时该注意的问题-附问题总结

全面解析设计模式中的建造者模式及相关C++实现