1

本当に簡単な質問ですが、グーグルで検索するための「正しい」単語を考えることができませんでした。私の問題は、リンク「履歴」をクリックした後も表示したいということです。ページをdivに移動したくないのですが、コンテンツを変更するだけです。コンテンツを非表示/切り替えるにはjqueryが必要になることはわかっていますが、リンク部分で立ち往生しています。

#goals{
display             : none;
}

#history{
display             : block;
}

<p ><a id="History" href="#history"> <b>History</b> </a></p>
<p ><a id="Goals" href="#goals"> <b>Goals</b> </a></p>

<div id="history">
<p> blah blah blah </p>
</div>

<div id="goals">
<p> blah blah blah </p>
</div>

$("#Goals").click(function(){
        $("#history).hide();
        $("#goals").show();
})
4

3 に答える 3

1

preventDefault()ハンドラーに渡されたイベント引数でメソッドを呼び出す必要があります。例えば：

<a id="historyLink" href="#">History</a>

...と...

$('#historyLink').click(function(e){
   e.preventDefault(); // block the default action
   // do something
});
于 2013-01-22T04:24:53.187 に答える
0

CSS は必要ありません。すべて jQuery で実行できます。

HTML

<p ><a id="History" href="#history"> <b>History</b> </a></p>
<p ><a id="Goals" href="#goals"> <b>Goals</b> </a></p>

<div id="history">
<p> history blah blah blah </p>
</div>

<div id="goals">
<p> goals blah blah blah </p>
</div>

jQuery

$("#goals").hide();

$("#Goals").click(function(){
    $("#history").hide();
    $("#goals").show();
});

$("#History").click(function(){
    $("#goals").hide();
    $("#history").show();
});

すべてを結び付けるjsFiddleを次に示します。

于 2013-01-22T04:08:29.567 に答える
0

ページが移動する理由は、それがアンカーのクリック イベントのデフォルト アクションであるためです。あなたがする必要があるのは、デフォルトのアクションが発生しないことを確認することです（これがページの「動き」の原因です。次のことをお勧めします：

<!-- you don't need to link it to the actual id, since you are toggling the visibility using jQuery -->
<a id="historyLink" href="#">History</a>

次に、jQueryに関する限り：

$('#historyLink').click(function(event){
    //prevent the page from scrolling
    event.preventDefault();
    //possibly hide the other div if it is visible
    $('#theotherdiv').hide();
    //show the div
    $('#historyLink').show();
});
于 2013-01-22T04:54:58.113 に答える