加载具有不同内容的不同div而不重新加载页面？

Question

我有以下代码通过单击链接加载具有不同内容的不同 div。我的问题是如何编写以便每次单击链接时都不会重新加载页面。

#content > div {
    display: none;
}
#content > div:target {
    display: block;
}
<a href="#div1">Div one</a>
<a href="#div2">Div two</a>
<a href="#div3">Div three</a>
<a href="#div4">Div four</a>

<div id="content">
    <div id="div1">This is div one</div>
    <div id="div2">This is div two</div>
    <div id="div3">This is div three</div>
    <div id="div4">This is div four</div>
</div>

Answer 1

你可以在链接标签中添加onclick事件，然后在js函数clickFun()中你可以做一些逻辑来显示和隐藏特定的div区域。

Answer 2

您可以使用 jquery 隐藏 3 个 div 并显示另一个（如果它们不是太大而无法呈现），或者如果它们基本上是您想要在它们之间切换的整个页面，则可以使用引导选项卡或类似的选项

Answer 3

您应该将document.location.hash 设置为您的锚。例如 div1 链接：

<a href="javascript:void(0)" onclick="document.location.hash='#div1'; return false;">Div one</a>

EDIT> 因为以前的代码不断重新加载页面。以下方法（灵感来自其他答案的建议）似乎适合：

<a href="javascript:void(0);" onclick="$('#div1').show().siblings().hide();return false;">Div one</a>

http://jsfiddle.net/5XqyX/