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


Posted in Javascript onFebruary 03, 2016

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

效果图:

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

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

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

关于return false可以参考本文: 《学习jQuey中的return false》

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

Javascript 相关文章推荐
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
小程序实现列表展开收起效果
Jul 29 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 #Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 #Javascript
AngularJS实现Model缓存的方式
Feb 03 #Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 #Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 #Javascript
简单实现js选项卡切换效果
Feb 03 #Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 #Javascript
You might like
php中目录,文件操作详谈
2007/03/19 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
javascript常用的方法分享
2015/07/01 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
Python3读写ini配置文件的示例
2020/11/06 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
工作迟到检讨书
2014/02/21 职场文书
向领导表决心的话
2014/03/11 职场文书
五一劳动节活动记录
2014/03/23 职场文书
正科级干部考察材料
2014/05/29 职场文书
啦啦队口号大全
2014/06/16 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js