渲染DIV旁邊的href

如何渲染href鏈接旁邊的div，我們使用JQuery。下面是附加的代碼，當點擊的div被呈現在瀏覽器的標籤下方時，我想呈現在href鏈接旁邊，因爲使用相同div標籤的網頁中會有很多href鏈接。渲染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>

來源

2011-06-15 Mukunda

創建一個的jsfiddle此：http://jsfiddle.net/bazmegakapa/gL3jf/ – kapa 2011-06-15 16:30:58

您可以通過.position()函數獲取鏈接的位置。它會給你元素的位置相對於抵消父母（.offset()你可以得到它相對於文檔）。

然後，你可以簡單地使用.css()在div來定位它。

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

jsFiddle Demo

來源

2011-06-15 16:33:30 kapa

非常感謝你，但有一兩件事我注意到的是，如果我有兩個HREF的和第一HREF我點擊了，沒有關閉div，如果我點擊第二個href它呈現在第二個位置沒有緩慢渲染，只是呈現任何有第一個href到第二個href（即沒有任何緩慢第二個href呈現沒有任何JQuery的div技巧）點擊第二個href的任何提示應該關閉第一個href並在第二個href位置新開放第二個動畫div。謝謝。 – Mukunda 2011-06-17 16:51:44

@Mukunda在顯示div之前，檢查它是否隱藏（'.is（'：hidden'）'），如果沒有，運行'.hide（'slow'）'。應該那麼簡單。如果您還有其他問題，請爲它開個新問題，這就是SO的工作原理。如果它足夠好，請點擊左邊的標記來接受我的答案。 – kapa 2011-06-18 06:22:36

渲染DIV旁邊的href

回答

相關問題