0

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

起初我考虑将整个内容放在网站上,隐藏其中一些并在点击后显示。

这个非常简单的例子

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

然后我考虑.html通过javascript包含文件中的内容并将它们放在网站上,但我的小研究告诉我这是非常糟糕的做法。某篇文章。

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

所以,我的问题是:这样做的最佳做法是什么?

任何帮助,将不胜感激。

4

1 回答 1

1

我不确定最好的方法是什么,但我建议使用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/

希望这会有所帮助,如果您有任何问题,请告诉我!

于 2013-02-25T22:22:52.040 回答