Jquery 点击按钮显示和隐藏层的代码


Posted in Javascript onJuly 25, 2011

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script type="text/javascript" src="../Javascript/jquery-1.6.js"></script> 
<style type="text/css"> 
#choice_list_district{ height:50px;} 
#tab td{cursor:pointer;} 
</style> 
<script type="text/javascript"> 
$(function () { 
//绑定事件处理 
$("#choice_list_district a").click(function (e) { 
if ($("#divObj").css("display") == "none") { 
e.stopPropagation(); 
//设置弹出层位置 
var offset = $(e.target).offset(); 
//设置弹出层位置在点击的下面 
$("#divObj").css({ top: offset.top + $(e.target).height() + "px", left: offset.left }); 
$("#divObj").show(); 
} 
else { 
$("#divObj").hide(); 
} 
}); 
//单击空白区域隐藏弹出层 
$(document).click(function (event) { $("#divObj").hide(); }); 
//单击弹出层则自身隐藏 
//$("#divObj").click(function (event) { $("#divObj").hide(speed) }); 
$("#tab tr td").click(function (event) { 
$("#aaa").val($(this).html()); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<div id="choice_list_district"> 
<a href="#">出来层</a> 
</div><div id="divObj" style="position: absolute; width:200px; height:200px; background:blue; border:1px solid block; display:none; z-index:9999;"> 
<table id="tab"> 
<tr> 
<td>aaa</td> 
</tr> 
<tr> 
<td>bbb</td> 
</tr> 
</table> 
</div> 
<div style="position:absolute; top:200px; left:200px;"> 
<input type="text" id="aaa" /> 
</div> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
JS常用函数使用指南
Nov 23 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 #Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 #Javascript
JS 自定义带默认值的函数
Jul 21 #Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 #Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 #Javascript
iframe 异步加载技术及性能分析
Jul 19 #Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 #Javascript
You might like
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
JavaScript 指导方针
2007/04/05 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
JS实现小星星特效
2019/12/24 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
python实现AES加密解密
2019/03/28 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
超市端午节活动方案
2014/01/23 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
药剂专业求职信
2014/06/20 职场文书
团日活动总结格式
2015/05/11 职场文书
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers