Javascript 如何在不重新加载的情况下显示多个内容？

我正在开发一些基于html5的网页。在我的页面上，我想要一些

nav

和包含选定内容的容器。但我不想在点击菜单位置后重新加载页面

起初我想把整个内容放在网站上，隐藏其中的一些内容，点击后再显示

但是有很多内容是隐藏的，我不确定这是一个好主意

然后我想用javascript包含

.html

文件中的内容，并将它们放在网站上，但我的一点研究告诉我这是非常糟糕的做法

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

因此，我的问题是：做这件事的最佳做法是什么

任何帮助都将不胜感激。

我不确定最好的方法是什么，但我建议同时使用

首先，使用

.ajaxSetup（）

，以便缓存将来的ajax请求

$.ajaxSetup({
    cache: true
});

然后，绑定使用

.load（）

的

.click（）

事件

下面是我示例中的代码

HTML:

演示：

---

希望这有帮助，让我知道如果你有任何问题

我在我的网站上使用.html，所以我不必重新加载数据，每次它都只与jquery中的.ajax相对应。这两个非常有用的iframes在这里可能会有所帮助。不总是隐藏和显示div，只是加载到一个容器中。您可能需要检查jQuery的函数。它专门用于调用服务器并获取附加的html，这些html可以附加到指定的元素中。@tymeJV只是一个旁注。Iframes肯定能做到。请注意，它们会阻止用户进行深度链接和书签。此外，这也使得搜索引擎爬虫很难正确索引您的站点。只是提醒一下。你的文章已经过时了，所以别介意！它说，我引用：“但浏览器必须是IE5和更多”，因为我们现在在IE10，嗯。。。！要添加到这一点，您可能需要添加一些hashtag更改或类似内容（pushState），这样您就可以通过内容链接+向前/向后。

<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>

$(document).ready(function(){
    $.ajaxSetup({
        cache: true
    });

    $('#nav>li').click(function(){
       var url = 7;
       index = $(this).index();
        url += index;
       $('#content' + (index + 1)).load('http://fiddle.jshell.net/dirtyd77/jUEEd/' + url + '/show/');
    });   
});