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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
JS实现评价的星星功能
Aug 20 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
详解React中共享组件逻辑的三种方式
Feb 02 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
php数据库抽象层 PDO
2011/05/07 PHP
php不用正则验证真假身份证
2013/11/06 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
JS array 数组详解
2009/03/22 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
Python 除法小技巧
2008/09/06 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
中海讯通笔试题
2015/09/15 面试题
在校硕士自我鉴定
2014/01/23 职场文书
销售代理协议书
2014/09/30 职场文书
导游词欢迎词
2015/02/02 职场文书
学习经验交流会策划书
2015/11/02 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
springboot实现string转json json里面带数组
2022/06/16 Java/Android