Как отображать несколько содержимого без перезагрузки?

Question

Я разрабатываю некоторую веб-страницу, которая основана на html5. На моей странице я хочу иметь nav и контейнер с выбранным контентом. Но я не хочу перезагружать страницу после нажатия на позицию меню.

Сначала Я думал о размещении всего контента на сайте, скрыть некоторые из них и показать после нажатия.

very simple example of this

Но есть много контента, который скрыт, и я не уверен, что это хорошая идея.

Тогда я думаю о включаю в себя контент из .html файлов по яваскрипту и разместил их на сайте, но мое маленькое исследование говорит мне, что это очень плохая практика. Some article.

Также это небольшая и простая страница, и я не хочу использовать какие-либо бэкэнд-технологии.

Итак, мой вопрос: Какая практика?

Любая помощь будет оценена по достоинству.

Answer 1

Я не уверен, что наилучшим образом есть, но я рекомендую использовать jQuery's .load() вместе с jQuery's .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/'); 
    }); 
}); 

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

Надеется, что это помогает, и дайте мне узнайте, есть ли у вас какие-либо вопросы!