2011-10-28 31 views
0

が、私は私のHTMLの本文の最後に以下のJavascriptを持っている:はJQuery:表示/非表示のdiv

<script> 

$(document).ready(function() { 

    $("a").click(function(event) { 

     var div_to_show=event.target.id; 

     var real_div=div_to_show.split('-'); 

     var display_div=real_div[0]; 

     var elementPos=$("#"+div_to_show).offset(); 

     var top_pos=elementPos.top-118.5;   

     $('#board-right div').hide(); 

     $("#" + display_div).css('margin-top',top_pos); 

     $("#" + display_div).show(); 

    }); 

}); 

</script> 

そして、ここで操作することになっているHTMLです:

<div id="board-left"> 
<div id="board-names"> 
    <a id="marci-link">Marci Weisler</a><br /> 
    <a id="nicholas-link">Nicholas Rey</a><br /> 
</div> 
</div><!-- #board-left --> 



<div id="board-right"> 
    <div id="marci" style="display:none;"> 
    <p> 
     Marci Weisler is an accomplished... 
    </p> 
</div> 
<div id="nicholas" style="display:none;"> 
    <p> 
     Nicholas Rey is a French-born... 
    </p> 
</div>  
</div><!-- board-right --> 

したがって、コードはクリックされたリンクからdiv名を取得し、 "-link"部分を削除し、適切なdivを表示する必要があります。現在、リンクをクリックしても何も起こっていません。私はこれを書いているので、私はそれがCSSの問題かどうか疑問に思っていますか?何か案は?

ところで、文書にはjQuery 1.3へのリンクがあります。

答えて

2

あなたがhttp://jsfiddle.net/pramodpv/YvYBD/をチェックすると、

あなたはトップposはuはuが必要として、それが動作することを修正した場合

PS ..負であることがわかります

:ようにあなたの質問を掲示しながら、jsfiddle使用してみてください人あなたのコードを処理し、より速い答えを与えることができます...ほとんどのprb、あなた自身が答えを見つけるでしょう:D

+0

btwどこにdivを表示するつもりでしたか? –

+0

ありがとうございます。 jsfiddleへのあなたのリンクは、コードを修正したのと同様に最も役立ちました。 –

+0

もhref = "#"とevent.preventDefault()に関して@EricBowdenが指摘したポイントでjsfiddleを更新しました[代わりにreturn falseを使用しました] –

2

例を試してみたら、ハイパーリンクにhref = '#'属性を加えなければならなかったクリックハンドラの最初の行にevent.preventDefault()を追加しました。

Pramod Syneityと同じように、一番上の位置は、テキストが表示される正の値として評価する必要があります。