[英]Rendering DIV next to href
如何在href鏈接旁邊呈現div,我們正在使用JQuery。 下面是附加的代碼,當單擊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>
您可以使用.position()
函數獲取鏈接的位置。 它將為您提供元素相對於偏移父級的位置(使用.offset()
可以獲取相對於文檔的位置)。
然后,您可以簡單地在div上使用.css()
進行定位。
$('a').click(function(){
var linkpos=$(this).position();
$('#cluster1')
.css('top', linkpos.top)
.show('slow');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.