关于用JS控制DIV的问题

代码简单，只有一个<input type="text" id="txt1">和一个<div id="div1"></div>
我想写个JS作为txt1的点击事件，然后让div1在txt1下面显示出来，因为txt1下面还有其他控件或者文字，所以想这个div1是浮在上面的。实在没思路，不会写，希望各位达人指点。

解决方案 »

  1.   


    <!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>
      <title> new document </title>
      <script type="text/javascript">
      <!--
    var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
    var absPosition = function(element){
    var iTop = iLeft = 0;
    do{
    iTop += element.offsetTop;
    iLeft += element.offsetLeft;
    }while(element = element.offsetParent);
    return {'x': iLeft, 'y': iTop};
    }
    function showLayer(obj, e){
    var e = e || window.event;
    var target = e.srcElement || e.target;
    with($('tip').style){
    display = "block";left = absPosition(target).x + "px";
    top = (absPosition(target).y + obj.offsetHeight) + "px";
    } }
      //-->
      </script>
     </head> <body>  
    <input type="text" id="txt1" onclick="showLayer(this, event);"><br>
    <input type="text" value="测试文本框" >
    <div id="tip" style="width:200px;height:100px;background-color:#BCBCBC;position:absolute;display:none;z-index:100">Menu</div>
     </body>
    </html>如果text下面是Select控件要单独做些处理.如果不是的话就不用了
      

  2.   


    <script>
    function $(id){
      return document.getElementById(id);
    }
    function aaa(){
      $("a").style.top=$("txt1").offsetTop+$("txt1").offsetHeight;
      $("a").style.left=$("txt1").offsetLeft;
      $("a").style.display=""
    }</script>
    <input type=text id=txt1 onclick="aaa()" onblur="$('a').style.display='none'">
    <div id=a style="position:absolute;background:#cff; border:1px solid #265492;display:none;">aaaaaaaa</div>
      

  3.   

    <input type="text" id="txt1" onclick="document.getElementById('div1').style.display ='block';">
    <div id="div1" style="display:none"></div>
      

  4.   


    //不是4楼的更简练,是因为4楼省了些东西而已.你测试下这种情况就知道了
    <script>
    function $(id){
      return document.getElementById(id);
    }
    function aaa(){
      $("a").style.top=$("txt1").offsetTop+$("txt1").offsetHeight;
      $("a").style.left=$("txt1").offsetLeft;
      $("a").style.display=""
    }</script>
    <div style="width:300px;height:300px;border:1px solid red"><!--嵌套个容器DIV-->
    <input type=text id=txt1 onclick="aaa()" onblur="$('a').style.display='none'">
    <div>
    <div id=a style="position:absolute;background:#cff; border:1px solid #265492;display:none;">aaaaaaaa</div>