求一段JavaScript,在指定的位置，展示或隐藏某一区域
日期：2014-05-16 浏览次数：20399 次
求一段JavaScript,在指定的位置，显示或隐藏某一区域
<a href="javascript:show('#MyArea')">詳細如下</a>
...
<div id="MyArea">
希望在指定的地方表示出来
</div>
因 <a>詳細如下</a> 是动态生成的，位置不定。
要求： MyArea区域在 <a>詳細如下</a> 的相对位置下面表示出来或隐藏。
(最好用jquery)
------解决方案--------------------
<a href="javascript:show('#MyArea')">詳細如下</a>
...
<div id="MyArea">
希望在指定的地方表示出来
</div>
因 <a>詳細如下</a> 是动态生成的，位置不定。
要求： MyArea区域在 <a>詳細如下</a> 的相对位置下面表示出来或隐藏。
(最好用jquery)
------解决方案--------------------
- HTML code
<a href="#" onclick="javascript:show('MyArea',this)">詳細如下</a>
------解决方案--------------------
这个要点就是获取被点击<a>的位置，给你段jquery版本的.
html代码同3#
- JScript code
function show(id,obj){
var obj=$(obj);
var position=obj.position();
$("#"+id).css("position","absolute").css("left",position.left).css("top",position.top+obj[0].offsetHeight).css("display","");
}
------解决方案--------------------
看看这是不是你要的效果
- JScript code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
var lastTarget = null;
function change(evt) {
var e = evt || window.event;
var target = e.srcElement || e.target;
var obj = document.getElementById("obj");
var rect = target.getBoundingClientRect();
obj.style.left = rect.left + "px";
obj.style.top = rect.bottom + "px";
if(target == lastTarget)
obj.style.display = obj.style.display == "" ? "none" : "";
else
obj.style.display = "";
lastTarget = target;
}
</script>
<body>
<div style="position:relative;left:100px;top:100px;"><a href="#" onclick="change(event)">点我</a>
<div style="position:relative;left:100px;top:50px;"><a href="#" onclick="change(event)">点我</a></div>
</div>
<div style="position:absolute;left:300px;top:400px;"><a href="#" onclick="change(event)">点我</a></div>
<div id="obj" style="position:absolute;width:100px;height:100px;border:1px gray solid;display:none;"></div>
</body>
</html>
------解决方案--------------------
a的onclick添加return false，阻止执行href
<a href="#" onclick="show('xxxxx',this);return false">afafa</a>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
