jQuery点击按钮实现div的隐藏和显示切换效果
2016-04-10 21:36
1351 查看
jQuery点击按钮实现div的隐藏和显示切换效果
点击按钮或者其他元素实现指定元素的显示和隐藏的切换在实际应用中非常常见,下面就以点击按钮实现div元素的隐藏和显示切换为例做一下简单介绍,代码实例如下:
点击按钮或者其他元素实现指定元素的显示和隐藏的切换在实际应用中非常常见,下面就以点击按钮实现div元素的隐藏和显示切换为例做一下简单介绍,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>蚂蚁部落</title> <style type="text/css"> #hidden_enent{ width:200px; height:150px; background:#ccc; text-align:center; line-height:150px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $('#click_event').click(function(){ if($('#hidden_enent').is(':hidden')){ $('#hidden_enent').show(); $('#click_event').val('点击隐藏'); } else{ $('#hidden_enent').hide(); $('#click_event').val('点击显示'); } }) }) </script> </head> <body> <input type="button" id="click_event" value="点击隐藏"/> <div id="hidden_enent">蚂蚁部落欢迎您</div> </body> </html>
相关文章推荐
- 一周乱弹(eclipse git重复输入密码、jQuery自动补全)
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
- jquery 实现点击 table中一行tr自动复制本行添加到本行之后 点击按钮回复到初始状态
- jQuery中的bind() live() delegate()之间区别分析
- JQuery选择器
- Ajax、jquery实现前后台数据交互
- 通过jquery addClass()方法,给指定按钮添加高亮显示效果
- jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )
- Jquery实战——横纵向的菜单
- jquery跨域调用wcf
- 从零开始学_JavaScript_系列(七)——jquery(复选框及互斥、div块、修改css、标签数组、ajax连续加载)
- Jquery第二步
- 对jQuery的事件绑定的一些思考
- 如何使用js懒加载图片|如何使用jquery.lazyload.js|网页优化|如何提高网页加载速度
- 基于jquery开发的选项卡
- 5-jQuery - AJAX get()/post()页面请求即执行
- jquery怎么跳出当前的each循环
- jQuery UI的一些基本用法