100分求助一个div层定位问题

binny0532 2008-11-10 07:30:00
两个文本框,一个div
现在想要的效果，div是隐藏的。点击两个文本框的任何一个，div显示在点击文本框的下方，紧贴着文本框的下沿，左边与文本框对齐。

这个效果怎样实现？
...全文
476 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
ltone 2010-10-08
  • 打赏
  • 举报
 回复
顶3楼11楼 好人真多啊
一把编程的菜刀 2008-11-11
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 zhu18 的回复:]
都写的什么啊 有那复杂吗

<input onclick="showMsg();">
<input onclick="showMsg();">
<div id="msg" style="display:none;border:1px solid #ff9933;background:#ffffe1;padding:10px;">div message </div>
<script>
function showMsg()
{
msg.style.display=(msg.style.display=='none')?'block':'none';
}
</script>
[/Quote]

你要是不懂呢，就不要随便说话，看清楚人家的要求再说
Ghost_520 2008-11-11
  • 打赏
  • 举报
 回复
LZ 可以试试我的，绝对符合你的要求！


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

<script>



   // 找到链接的坐标，以显示选择评论页面

   function show(e , div){

	 div = document.getElementById(div);   

     var t=e.offsetTop;

     var l=e.offsetLeft;

     while(e=e.offsetParent){

         t+=e.offsetTop;

         l+=e.offsetLeft;

     }

	 div.style.visibility = "visible";

	 div.style.left = l;

	 div.style.top = t+20; // 纵坐标要加 20 ，因为要正好显示在文本框的下边就要加上文本框的高度（20 px）

   }

</script>

<body>

<div id="od" style="visibility:hidden; position:absolute; width:100px; height:20px; border:1px solid #00f">一个DIV</div>

<br/><br/>

  <input id="text1" onClick="show( this ,'od')"/>     

<input id="text2" onClick="show( this ,'od')"/>

</body>

</html>
NIKIA 2008-11-11
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 zhu18 的回复:]
都写的什么啊 有那复杂吗

<input onclick="showMsg();">
<input onclick="showMsg();">
<div id="msg" style="display:none;border:1px solid #ff9933;background:#ffffe1;padding:10px;">div message </div>
<script>
function showMsg()
{
msg.style.display=(msg.style.display=='none')?'block':'none';
}
</script>
[/Quote]

同意！
zhu18 2008-11-11
  • 打赏
  • 举报
 回复
都写的什么啊 有那复杂吗

<input onclick="showMsg();">
<input onclick="showMsg();">
<div id="msg" style="display:none;border:1px solid #ff9933;background:#ffffe1;padding:10px;">div message</div>
<script>
function showMsg()
{
msg.style.display=(msg.style.display=='none')?'block':'none';
}
</script>
mengxj85 2008-11-11
  • 打赏
  • 举报
 回复
好多高手，学习
zou_wei_forever 2008-11-11
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 zhu18 的回复:]
都写的什么啊 有那复杂吗

<input onclick="showMsg();">
<input onclick="showMsg();">
<div id="msg" style="display:none;border:1px solid #ff9933;background:#ffffe1;padding:10px;">div message </div>
<script>
function showMsg()
{
msg.style.display=(msg.style.display=='none')?'block':'none';
}
</script>
[/Quote]
问题不复查，关键在这：点击两个文本框的任何一个，div显示在点击文本框的下方，紧贴着文本框的下沿，左边与文本框对齐，3楼的方法应该可以实现。
xiaojing7 2008-11-10
  • 打赏
  • 举报
 回复
晚了接分
Greg_han 2008-11-10
  • 打赏
  • 举报
 回复
<!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=gb2312" />
<title>无标题文档</title>
<script>
function vis(obj){
var od = document.getElementById('od'), o = obj, x = 0, y = 0, h = obj.offsetHeight;
while(o != null){
x += o.offsetLeft;
y += o.offsetTop;
o = o.offsetParent;
}
od.style.left = x+'px';
od.style.top = y+ h +'px';
od.style.visibility = 'visible';
}
function hid(){
document.getElementById('od').style.visibility = 'hidden';
}
</script>
</head>
<body>
<div id="od" style="visibility:hidden; position:absolute; width:50px; height:100px; border:1px solid #00f">一个DIV</div>
<a href="#" onclick="vis(this)" onmouseout="hid()">第一个文本框</a> <a href="#" onclick="vis(this)" onmouseout="hid()">第二个广本框</a>
</body>
</html>
一把编程的菜刀 2008-11-10
  • 打赏
  • 举报
 回复 
<script>

var oldobj;

    function vis(obj){

        var od = document.getElementById('od'), o = obj, x = 0, y = 0, h = obj.offsetHeight;

		if(oldobj){od.style.visibility = 'hidden';}

            x += o.offsetLeft;

            y += o.offsetTop;

            o = o.offsetParent;

        od.style.left = x+'px';

        od.style.top = y+ h +'px';

        od.style.visibility = 'visible';

		oldobj=obj;

    }

</script>

<div id="od" style="visibility:hidden; position:absolute; width:50px; height:100px; border:1px solid #00f">一个DIV</div>

<input name="txt1" id="txt1" type="text" onclick="vis(this)">

<input name="txt2" id="txt2" type="text" onclick="vis(this)">
neo_yoho 2008-11-10
  • 打赏
  • 举报
 回复 


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

<script>

function realOffset(o)

{

var x = y = 0; do{

x += o.offsetLeft || 0; 

y += o.offsetTop  || 0;

o  = o.offsetParent;}while(o);

return {"x" : x, "y" : y};

}

function show(obj)

{

var div =document.getElementById('div');

div.style.display="";

div.style.left =realOffset(obj).x+"px"

div.style.top=realOffset(obj).y+obj.offsetHeight+"px"

}

</script>

<body>

<br><br><br><br>

<input type="text" onfocus="show(this)">

<br><br><br><br>

<br><br><br><br>ssssssss

<input type="text" onfocus="show(this)">

<div id="div" style="display:none; position:absolute; width:100px; height:100px; border:1px solid black">

<span style="color:blue" onclick="document.getElementById('div').style.display='none'">关闭</span></div>

</body>

</html>
王集鹄 2008-11-10
  • 打赏
  • 举报
 回复 
<!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=gb2312" />

<title>测试</title>

</head>

<body>  

<script type="text/javascript">

function TextareaFocus(index) {

    document.getElementById("div" + index).style.display = "";

}

function TextareaBlur(index) {

    document.getElementById("div" + index).style.display = "none";

}

</script>                

<table>

<tbody>

    <tr>

        <td>

            <textarea rows="2" cols="20" onfocus="TextareaFocus(1);" onblur="TextareaBlur(1);">1</textarea>

        </td>

        <td>

            <textarea rows="2" cols="20" onfocus="TextareaFocus(2);" onblur="TextareaBlur(2);">2</textarea>

        </td>

    </tr>

    <tr>

        <td>

            <div id="div1" style="display:none;">div1</div>

        </td>

        <td>

            <div id="div2" style="display:none;">div2</div>

        </td>

    </tr>

</tbody>

</table>

</body>

</html>
cgisir 2008-11-10
  • 打赏
  • 举报
 回复 
<!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=gb2312" />

<title>无标题文档</title>

<script>

	function vis(obj){

		var od = document.getElementById('od'), o = obj, x = 0, y = 0, h = obj.offsetHeight;

		while(o != null){

			x += o.offsetLeft;

			y += o.offsetTop;

			o = o.offsetParent;

		}

		od.style.left = x+'px';

		od.style.top = y+ h +'px';

		od.style.visibility = 'visible';

	}

	function hid(){

		document.getElementById('od').style.visibility = 'hidden';

	}

</script>

</head>

<body>

<div id="od" style="visibility:hidden; position:absolute; width:50px; height:100px; border:1px solid #00f">一个DIV</div>

<a href="#" onclick="vis(this)" onmouseout="hid()">第一个文本框</a> <a href="#" onclick="vis(this)" onmouseout="hid()">第二个广本框</a>

</body>

</html>
LMMMMMMM 2008-11-10
  • 打赏
  • 举报
 回复
xuexi
Jarvis-Li 2008-11-10
  • 打赏
  • 举报
 回复
先得到文本框的坐标再用文本框的坐标减去高度

得到的坐标就是DIV要用到的坐标

再让DIV显示就可以了
让内层DIV跟着外层DIV变化
让内层DIV跟着外层DIV变化
求助帖JS控制层定位浏览器不兼容的问题
IE的时候图片在右边显示，而FF的时候图片在文字下面显示，现在如何做，才能让2个浏览器下都文字下方显示啊？QQ5650387 <html> <head><meta http-equiv="Content-Type" content="text/html; charset=...
margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题 问题表述： 那天晚上一个同学给我发来一个问题，原型大概是“一个maindiv嵌套了一个div.class="he
那天晚上一个同学给我发来一个问题，原型大概是“一个maindiv嵌套了一个div.class="headr1" 的div 和一个div.class="header2" 的这样两个 div,他给maindiv 设定了background="black" header1设定background=
编辑器：关于TextRange 光标定位的问题（求助）
编辑器层为一个div 容器如： <div contenteditable="true" style="width: 676px; height: 296px; display: block;" id="content"></div> 在这个容器（#content）里输入一段文字、然后将光标移动...
css + div 布局之 CSS盒模型 外边距合并问题
那天晚上一个同学给我发来一个问题，原型大概是“一个maindiv嵌套了一个div.class="headr1" 的div 和一个div.class="header2" 的这样两个 div,他给maindiv 设定了background="black" header1设定background=“red” ...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章