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

Question

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

example http://img402.imageshack.us/img402/1733/examplew.jpg

Answer 1

Я бы рекомендовал вам использовать делегирование мероприятий. Например, мы можем использовать метод .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 2

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

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

и если вы хотите, чтобы получить немного больше фантазии попробовать Tab виджет

Answer 3

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

Answer 4

Использование 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 

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

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

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

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

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

Answer 5

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

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

Answer 6

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