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>

编辑＆gt;因为以前的代码不断重新加载页面。以下方法（灵感来自其他答案所暗示的）似乎适合：

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

http://jsfiddle.net/5XqyX/

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

3 个答案: