Ссылка в одном div, пытаясь загрузить контент в отдельном div

Question

Я использую jQuery для создания веб-сайта, и я хочу, чтобы моя навигация была отдельной от моего контента. Кроме того, я хочу, чтобы у меня была такая навигационная система с вкладками, чтобы я мог щелкнуть ссылку в навигации, и она загрузит контент в основной контент. По сути, я хочу сделать это так, чтобы я мог поддерживать только одну страницу со всем содержимым, а не набор страниц для каждого раздела. Я включил картинку, которая, надеюсь, сделает мой вопрос более понятным (щелчок правой кнопкой мыши и «изображение viw», на этой странице она слишком мала):

пример http://img402.imageshack.us/img402/1733/examplew.jpg

Answer 1

$('#navlink').click(function() {
    $("#maindiv").load("/url.html");
    return false;
});

Answer 2

Я бы посоветовал вам использовать делегирование событий. Например, мы можем использовать метод .on, чтобы прикрепить одно событие к панели навигации, которое будет прослушивать щелчки по ссылкам:

$("#navigation").on("click", "a", function(e){
    e.preventDefault();
    $("#content").load( $(this).prop("href") );
});

, который работает со следующей разметкой:

<div id="navigation">
    <a href="home.html">Home</a>
    <a href="gallery.html">Gallery</a>
</div>
<div id="content"><!-- content will load here --></div>

Answer 3

Учитывая, что вам нужна одна страница со всем содержимым, вы можете просто скрыть все, кроме одного основного div с помощью css, а затем использовать javascript / jQuery, чтобы показать один div при нажатии на вкладку, и скрыть все остальные ( основные элементы).

Answer 4

Это вызывает функцию jQuery load ()! Перейдите на http://remysharp.com/jquery-api/ и найдите «load» - вам просто нужно нацелиться на div.

Кстати, это своего рода альтернатива фреймам или серверам. Единственный недостаток этого подхода в том, что поисковые системы не смогут переходить по вашим ссылкам.

Answer 5

Использование ajax с jQuery довольно просто и полностью управляемо:

    $('#navlink').click(function() {
                     $.ajax({
                         type: "GET",
                         url: 'URL_OF_THE_RESOURCE', 
                        //(maybe you can hold this in the href attr of the anchor tag)
                        //in that case you can use $(this).attr('href');
                         dataType: "text/html", //spectating HTML back from the server
                         timeout: 8000, //Wait 8 second for the response
                         error: function() {
                             alert('ERROR');//case of server error or timeout give a feedback to the user
                         }, //end error
                         success: function(html) {
                             $('#mainDiv').html(html); //Replace the content with the new HTML
                         } //end succes
                     });   //end ajax
                     return false;
                 }); //end click

Вместо присвоения идентификатора вы можете использовать фиктивный класс (например, «navlink») для всех этих навигационных ссылок, поэтому вместо ссылки селектора на идентификатор укажите его класс:

$('.navlink').click(function(){
...

и параметр url будет:

url: $(this).attr('href'),

Таким образом, вы просто установите его один раз, и все ссылки получат функциональность и все равно будут поддерживать пользователей, у которых JS не активен.

Answer 6

Ваши навигационные ссылки изменяют HTML вашего центра. Div
<a href="#" onclick="$('#centerDiv').html('your content');">Click me<a>

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

и, если вы хотите получить больше удовольствия, попробуйте виджет Tab