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

我正在开发一些基于html5的网页。在我的页面上，我想拥有一些nav以及包含选定内容的容器。但是我不想在点击菜单位置后重新加载页面。如何在不重新加载的情况下显示多个内容？

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

very simple example of this

但也有很多内容被隐藏的，我不知道这是一个好主意。

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

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

所以，我的问题是：这样做的最佳做法是什么？

任何帮助，将不胜感激。

来源

2013-02-25 Mateusz Rogulski

我在我的网站上使用.html，所以我不必重新加载数据，每次它只与jquery中的.ajax相对应，这两者都非常有用 – ryanc1256 2013-02-25 21:08:01

Iframes可能对此有所帮助。并不总是隐藏和显示div，只是加载到一个容器中。 – tymeJV 2013-02-25 21:08:19

您可能想查看jQuery的['.load']（http://api.jquery.com/load/）函数。它专门用于调用服务器并获取可附加到指定元素的附加html。 – War10ck 2013-02-25 21:08:44

我不确定什么是最好的方式，但我建议使用jQuery's .load()与jQuery's .ajaxSetup()一起。

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

$.ajaxSetup({ 
    cache: true 
});

然后，结合使用一个.click()事件。

这里是我的示例代码...

HTML：

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

JAVASCRIPT：

$(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/'); 
    }); 
});

DEMO： http://jsfiddle.net/dirtyd77/jUEEd/13/

希望这有助于让我知道你是否有任何问题！

来源

2013-02-25 22:22:52 Dom

要添加到此，您可能需要添加一些hashtag更改或类似（pushState），以便您可以通过内容链接+前进/后退。 – Daniel 2013-02-26 12:28:21

我同意。这将是一个好主意。 – Dom 2013-02-26 14:56:04

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

回答

相关问题