我想做的效果是:
类似CSDN论坛左侧鼠标移到每个用户头像上都会显示层,然后层中的内容能够通过AJAX (LOADING....载入数据)
我找了段代码,如果是单个的话,显示隐藏层是正确的,但是把它放在循环语句里就显示不出来了,要把
---------------------------------------------------------------------------------------------------
<a href="javascript:void(0)" onmouseover="over(this,td0)" onmouseout="timer=setTimeout('out(td0)',0)">健康教育的重要性(详解)</a><div id="td0" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">   
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
----------------------------------------------------------------------------------------------------这个放到循环语句里,让他逐个显示正常应该怎么改呢?

--------------以下是完整代码----------------------------------------------------
<!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>
<script>
function over(obj,div,bol){
var rec=getoffset(obj);
  div.style.top=rec[0]+obj.offsetHeight;
  if(bol==true)
  rec[1] -= 50;
  div.style.left=rec[1];   
  div.style.display="block";   
}
    
function out(div) {
div.style.display="none";
}function getoffset(e) {   
var t=e.offsetTop;   
  var l=e.offsetLeft;   
  while(e=e.offsetParent) {   
  t+=e.offsetTop;   
  l+=e.offsetLeft;   
  }   
var rec = new Array(1);  
  rec[0] = t;  
  rec[1] = l;  
  return rec  
}   </script>
<BODY>
<table>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">11111</td>
</tr>
<tr>
  <td height="29" colspan="2" align="left" class="STYLE1">222222</td>
</tr>
<tr>
  <td height="29" colspan="2" align="left" class="STYLE1"><span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td0)" onmouseout="timer=setTimeout('out(td0)',0)">健康教育的重要性(详解)</a></span></td>
</tr>
<tr>
  <td height="29" colspan="2" align="left" class="STYLE1">333333</td>
</tr>
<tr>
  <td height="29" colspan="2" align="left" class="STYLE1">444444</td>
</tr>
<tr>
<div id="td0" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">   
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
</tr>
</table>
</BODY>

解决方案 »

  1.   

    自己写了个 你的代码运行无效= =. 我比较偷懒 用了JQ 并且没有用LZ的思想一个DIV一直更改offset,而是用了每个项对应一个可显示/隐藏的DIV,代码上可能代码量上多了些<!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>
    <style>
    .td0{
    margin-left:100px;
    }
    </style>
    </HEAD><BODY>
    <!--copy it-->
    <p><a class="xlink" href="javascript:void(0)">11111111111123213</a></p>
    <div class="td0" class="STYLE4" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">  
    1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
    2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
    3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
    <!--one copy end--><p><a class="xlink" href="javascript:void(0)">23213</a></p>
    <div class="td0" class="STYLE4" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">  
    1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
    2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
    3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
    <p><a class="xlink" href="javascript:void(0)">健康教育的重要性(详解)</a></p>
    <div class="td0" class="STYLE4" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">  
    1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
    2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
    3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div><script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(function(){
    $(".xlink").mouseover(function(){
    $(".td0").css("display","none");
    $(this).parent().next(".td0").css("display","block");});$(".td0").mouseout(function(){$(".td0").css("display","none");});})
    </script>
    </BODY>
    </html>
      

  2.   

    <!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>
    <script>
    function over(obj,div,bol){
    var rec=getoffset(obj);
      div.style.top=rec[0]+obj.offsetHeight;
      if(bol==true)
      rec[1] -= 50;
      div.style.left=rec[1]+30; //加了一个偏移,这样便于切换显示。若不需要,可以去掉。
      div.style.display="block";   
    }
        
    function out(div) {
    div.style.display="none";
    }function getoffset(e) {   
    var t=e.offsetTop;   
      var l=e.offsetLeft;   
      while(e=e.offsetParent) {   
      t+=e.offsetTop;   
      l+=e.offsetLeft;   
      }   
    var rec = new Array(1);   
      rec[0] = t;   
      rec[1] = l;   
      return rec   
    }   </script>
    <BODY>
    <table>
    <tr>
    <td height="29" colspan="2" align="left" class="STYLE1"><span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td0)" onmouseout="timer=setTimeout('out(td0)',0)">健康的重要性(详解)</a></span></td>
    </tr>
    <tr>
      <td height="29" colspan="2" align="left" class="STYLE1"><span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td1)" onmouseout="timer=setTimeout('out(td1)',0)">教育的重要性(详解)</a></span></td>
    </tr>
    <tr>
      <td height="29" colspan="2" align="left" class="STYLE1"><span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td2)" onmouseout="timer=setTimeout('out(td2)',0)">健康教育的重要性(详解)</a></span></td>
    </tr>
    <tr>
    <div id="td0" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">   
    1、身体是革命的本钱;<br/>
    2、身体是性福的本钱;<br/>
    </div>
    <div id="td1" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">   
    1、不学不知;<br/>
    2、不学无术;<br/>
    </div>
    <div id="td2" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">   
    1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
    2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
    3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
    </tr>
    </table>
    </BODY>
      

  3.   

    不知你指的循环和手工加是什么意思。
    上面的是按你原来的代码改的。
    在后台通过循环输出这些,也毫无问题啊。包括后面的DIV部分的ID和DIV里内容。
    有什么问题,说得具体清楚些,不易说明的就举实例,不要光用感性的行不行。
      

  4.   

    LZ啊 你循环这段不就好了么
    <p><a class="xlink" href="javascript:void(0)">健康教育的重要性(详解)</a></p>
    <div class="td0" class="STYLE4" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">  
    1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
    2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
    3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
      

  5.   

    我上次没注意,楼主说的意思,是只用一个显示信息的DIV,每次通过AJAX去获取并返回设置这个DIV里的内容,是吧。
    你是什么岗位?如果你只是前台,这个也需要后台配合的。你这种情况,只需要把鼠标移动过去时获得的对象的ID通过AJAX传给后台程序,后台程序根据它返回相应的信息即可,前台接收到设置DIV。我这样一说,如果你稍懂AJAX,几乎代码都出来了。不过,我不建议你滥用AJAX,你这种情况好像就是滥用。因为项目没几个,完全可以象上面我给的代码那样一次性写入页面进行显示切换。而且每次移动过去都要去取,也没效率。当然,也可以事先判断一下是否AJAX已经返回这个内容,不过,相对这个情形来说,还是没什么必要。