如何在不重新加载的情况下显示多个内容?
问题描述:
我正在开发一些基于html5
的网页。在我的页面上,我想拥有一些nav
以及包含选定内容的容器。但是我不想在点击菜单位置后重新加载页面。如何在不重新加载的情况下显示多个内容?
起初我想过把整个内容放在网站上,隐藏其中的一些内容并点击后显示。
但也有很多内容被隐藏的,我不知道这是一个好主意。
然后我想通过javascript包含来自.html
文件的内容并将它们放在网站上,但我的小研究告诉我这是非常糟糕的做法。 Some article.
也这是小的,简单的页面,我不想使用任何后端技术。
所以,我的问题是:这样做的最佳做法是什么?
任何帮助,将不胜感激。
答
我不确定什么是最好的方式,但我建议使用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/
希望这有助于让我知道你是否有任何问题!
我在我的网站上使用.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