0

我有以下代码通过单击链接来加载具有不同内容的不同 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>
4

3 回答 3

1

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

于 2013-11-06T13:47:34.093 回答
1

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

于 2013-11-06T13:49:30.543 回答
0

你应该设置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/

于 2013-11-06T13:56:47.200 回答