Question

我正在开发一些基于html5的网页。在我的页面上，我想要一些nav和包含所选内容的容器。但是我点击菜单位置后不想重新加载页面。

起初我考虑将整个内容放在网站上，隐藏部分内容并点击后显示。

very simple example of this

但是有很多内容被隐藏起来，我不确定这是个好主意。

然后我想通过javascript包含来自.html文件的内容并将它们放在网站上，但我的小研究告诉我这是非常糟糕的做法。 Some article.

这是一个小而简单的页面，我不想使用任何后端技术。

所以，我的问题是：执行此操作的最佳做法是什么？

任何帮助都将不胜感激。

Answer 1

我不确定最佳方式是什么，但我建议您使用jQuery's .load()以及jQuery's .ajaxSetup()。

首先，使用.ajaxSetup()，以便您可以缓存未来的ajax请求。

$.ajaxSetup({
    cache: true
});

然后，绑定使用.click()的{{1}}事件。

以下是我的示例代码......

HTML：

.load()

JAVASCRIPT：

<ul id="nav">
    <li id="first">first</li>
    <li id="second">second</li>
    <li id="last">last</li>
</ul>
<ul id="contents">
    <li id="content1">first</li>
    <li id="content2">second</li>
    <li id="content3">last</li>
</ul>

样本： http://jsfiddle.net/dirtyd77/jUEEd/13/

希望这有帮助，如果您有任何问题，请告诉我们！

如何显示多个内容而不重新加载？

1 个答案: