我不确定最好的方法是什么,但我建议使用jQuery.load()
和jQuery 的.ajaxSetup()
.
首先,使用.ajaxSetup()
这样您就可以缓存未来的 ajax 请求。
$.ajaxSetup({
cache: true
});
然后,绑定一个.click()
使用.load()
.
这是我的示例中的代码...
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/');
});
});
演示:http:
//jsfiddle.net/dirtyd77/jUEEd/13/
希望这会有所帮助,如果您有任何问题,请告诉我!