javascript - 使 id 链接可见 - 防止单击 anchor 时的默认事件。

Question

一个非常简单的问题，但我想不出在谷歌上搜索的“正确”词。我的问题是我想让“历史”链接在我点击它之后仍然可见。我不希望页面下降到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();
})

Answer 1

您需要对传递给处理程序的事件参数调用 preventDefault() 方法。例如:

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

...和...

$('#historyLink').click(function(e){
   e.preventDefault(); // block the default action
   // do something
});