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 相关文章推荐
jQuery 对Select的操作备忘记录
Jul 04 Javascript
jQuery 联动日历实现代码
May 31 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
PHP常用函数小技巧
2008/09/11 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php实现通过ftp上传文件
2015/06/19 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
Python序列化pickle模块使用详解
2020/03/05 Python
python如何提升爬虫效率
2020/09/27 Python
详解pandas赋值失败问题解决
2020/11/29 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
女性时尚在线:IVRose
2019/02/23 全球购物
暑假实习求职信范文
2013/09/22 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
股东合作协议书范本
2014/04/14 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015入党自传格式范文
2015/06/26 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书