Javascript href旁边的呈现DIV

如何在href链接旁边呈现div，我们正在使用JQuery。 下面是代码附件，当单击浏览器选项卡下方的div时，我想在href link旁边进行渲染，因为网页中将有许多使用相同div标记的href链接

我不能在css中这样做，因为它固定在那个位置，我对页面中的许多href使用相同的div，但在单击链接的用户上动态更改div的内容

代码见附件

任何帮助都会很有帮助

谢谢

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">
      $(document).ready(function(){

      $('#cluster1').hide();

            $('a').click(function(){

            $('#cluster1').show('slow');

   });

   $('a#close').click(function(){
        $('#cluster1').hide('slow');
        })

      });
</script>

<style>

.heading {
background:none repeat scroll 0 0 #B8CFE6;
color:#333333;
font:bold 12px verdana;
padding:7px;
}

.fr {
float:right;
}

element.style {
display:block;
}
.cluster {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #757893;
display:none;
left:80px;
position:absolute;
text-align:left;
top:0;
width:560px;
z-index:10000;
margin-left:100px;
}

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, td {
margin:0;
padding:0;
}

.content {
background:none repeat scroll 0 0 #FFFFFF;
font:11px verdana;
overflow:auto;
width:560px;
}

.bottom {
border-top:1px solid #C1C8D4;
font:11px verdana;
padding:7px;
text-align:right;
}
.fl {
float:left;
}

.content ul li {
float:left;
padding:5px;
width:170px;
list-style: none;
}
</style>

<div class="cluster" id="cluster1" style="display: block;"><div class="heading">
                    <div class="fr"><p><a href="#" id="close">Close</a></p></div>
                        Update
                </div>
                    <form method="post" action="">

                    </form>
                </div>

                </br></br></br></br></br></br></br></br>
                <a href="#" id="click">Click Here</a>

$（文档）.ready（函数（）{
$（'#cluster1'）.hide（）；
$（'a'）。单击（函数（）{
$（'#cluster1'）。show（'slow'）；
});
$（'a#close'）。单击（函数（）{
$（'#cluster1'）。隐藏（'slow'）；
})
});
.标题{
背景：无重复滚动0 0#B8CFE6；
颜色：#333333；
字体：粗体12px verdana；
填充：7px；
}
先生{
浮动：对；
}
元素风格{
显示：块；
}
.群集{
背景：无重复滚动0 0#FFFFFF；
边框：1px实心#757893；
显示：无；
左：80px；
位置：绝对位置；
文本对齐：左对齐；
排名：0；
宽度：560px；
z指数：10000；
左边距：100px；
}
正文，div，ul，ol，li，h1，h2，h3，h4，h5，h6，表单，输入，按钮，文本区，p，td{
保证金：0；
填充：0；
}
.内容{
背景：无重复滚动0 0#FFFFFF；
字体：11px verdana；
溢出：自动；
宽度：560px；
}
.底部{
边框顶部：1px实心#C1C8D4；
字体：11px verdana；
填充：7px；
文本对齐：右对齐；
}
.fl{
浮动：左；
}
.李国宝{
浮动：左；
填充物：5px；
宽度：170px；
列表样式：无；
}

更新

您可以使用该函数获取链接的位置。它将为您提供元素相对于偏移父元素的位置（您可以使用它相对于文档）

然后，您可以简单地在div上使用来定位它

  $('a').click(function(){
      var linkpos=$(this).position();
      $('#cluster1')
          .css('top', linkpos.top)
          .show('slow');         
  });

---

为此创建了一个JSFIDLE：非常感谢，但我注意到的一件事是，如果我有两个href，在第一个href上我单击了，并且没有关闭div，如果我单击第二个href，它将在第二个位置渲染，而不缓慢渲染，只将第一个href上的内容渲染到第二个href（这是没有任何慢度的second href在没有任何Jquery技术的情况下渲染div）单击second href的任何提示都应该关闭第一个href并在第二个href位置缓慢地打开第二个动画div。谢谢。@Mukunda在显示div之前，检查它是否隐藏（

.is（':hidden'）

），如果没有，请运行

.hide（'slow'））

关于它。应该很简单。如果你还有其他问题，请为它打开一个新问题，这就是它的工作原理。如果它足够好，请单击左侧的勾号接受我的答案。