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的图片懒加载js
Jun 30 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
纯JS实现轮播图
Feb 22 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
实用函数5
2007/11/08 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
常用PHP封装分页工具类
2017/01/14 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
Python切换pip安装源的方法详解
2016/11/18 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
应届护士推荐信
2013/11/16 职场文书
安全标准化实施方案
2014/02/20 职场文书
学生安全承诺书
2014/05/22 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
2015年采购部工作总结
2015/04/23 职场文书
教师远程研修感悟
2015/11/18 职场文书