手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Jquery 点击按钮显示和隐藏层的代码
Jquery 点击按钮显示和隐藏层的代码
摘要:代码:复制代码代码如下:#choice_list_district{height:50px;}#tabtd{cursor:pointer;}...

代码:

复制代码 代码如下:

<!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">

<table id="tab">

<tr>

<td>aaa</td>

</tr>

<tr>

<td>bbb</td>

</tr>

</table>

</div>

<div>

<input type="text" id="aaa" />

</div>

</div>

</form>

</body>

</html>

【Jquery 点击按钮显示和隐藏层的代码】相关文章:

JS动画效果打开、关闭层的实现方法

JS函数实现鼠标指向图片后显示大图代码

javascript用函数实现对象的方法

JavaScript实现鼠标点击后层展开效果的方法

jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法

JQuery实现动态添加删除评论的方法

Js和JQuery获取鼠标指针坐标的实现代码分享

jquery实现的判断倒计时是否结束代码

JQuery+CSS实现图片上放置按钮的方法

jQuery实现div随意拖动的实例代码(通用代码)

精品推荐
分类导航