2010-03-03 37 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(); 
    });