2010-03-03 84 views
0

有人可以幫忙嗎?我是jquery的新手,而且我看起來太簡單了。對不起,如果這是一個轉發,但我找不到我在找什麼。jquery顯示鏈接標記旁邊的div

我在頁面上有2個鏈接,當你把鼠標懸停在其中一個鏈接上時,你會在鏈接旁邊顯示相應的div。就像一個對話框彈出。繼承人我有什麼,請讓我知道我做錯了..

JS代碼:

function Show(id) 

{

var pos = $("a#88" + id).offset();  
    var eWidth = $("a#88" + id).outerWidth(); 
    var mWidth = $("div#99" + id).outerWidth(); 
    var left = (pos.left + eWidth - mWidth) + "px"; 
    var top = pos.top + "px"; 


    //alert(left + ' ' + top); 


    $('div#99'+id).css("top", top); 
    $('div#99'+id).css("left", left); 
    $('div#99'+id).css("position", "fixed"); 


    $('a:Tip').hover(  
    function($e) { $('div#99'+id).slideDown(500); },   
    //function($e) { }, 
    function($e) { $('div#99'+id).slideUp(500); } 
); 

}

的html代碼:

<a href="#" id="88123456" class="Tip" onmouseover="Show(123456);">Some Title Text</a> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<a href="#" id="88456789" class="Tip" onmouseover="Show(456789);">Some Title Text2</a> 
<br /> 
<div id='99123456' title="hello" style="display:none;"> 
    something here;99123456 

</div> 

<div id='99456789' title="hello" style="display:none;"> 
    something here;99456789 

</div> 

謝謝

回答

3

可能這是你在找什麼

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

    $('a.Tip').hover(function(){ 

    var link = $(this); 
    var dialog = link.next('div'); 

    dialog.css("top", link.position().top); 
    dialog.css("left", link.position().left + link.width()); 
    dialog.css("position", "fixed"); 

    dialog.slideDown(500); 
    }, 

    function() { 
    $(this).next('div').slideUp(500); 
    }); 

}); 

</script> 

<a href="#" class="Tip" >Some Title Text</a> 
    <div title="hello" style="display:none;"> 
    something here;99123456 
</div> 
<br /> 
<a href="#" class="Tip" >Some Title Text2</a> 
<div title="hello" style="display:none;"> 
    something here;99456789 
</div> 
+0

看起來是做到了。謝謝回覆 – Dave 2010-03-04 03:51:54

0

你爲什麼不只是使用

$('a.Tip').hover(function() { 
     $(this).next().slideToggle(); 
    });