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 回答