2014-10-08 2 views
0

Я пытаюсь создать веб-страницу, которая будет динамически заполнять div с помощью AJAX. Я был в состоянии просто обновить содержимое Div с помощью следующего кода AJAX:Динамическое изменение содержания страницы и установка хэша с помощью AJAX/jQuery

$(document).ready(function(){ 
    $("#projects-list a").click(function(e){ 
     e.preventDefault(); 
     var url = $(this).attr('href'); //get the link you want to load data from 
     $.ajax({ 
      type: 'GET', 
      url: url, 
      success: function(data) { 
       $('#content').fadeOut(300, function() { 
        $('#content').html(data).delay(200).fadeIn(300); 
       }); 
      } 
     }); 
    }); 
}); 

Однако, я также надеюсь найти способ, чтобы обновить страницу URL или изменить хэш. Так, например, когда пользователю предоставляется ссылка на /projects.html, они будут отправлены на страницу ссылок, а затем, когда будет нажата ссылка, контент будет изменен с использованием AJAX, и URL изменится на /projects .html # первый. Таким образом, пользователь переходит к /projects.html#first, они будут видеть контент для первого проекта, а не исходный список проектов на выбор.

+1

Посмотрите на 'history.js'. Он переносит HTML-переписывание URL-адресов так же, как и для браузеров HTML4 (используя хэш-теги для них). Он предоставляет события изменения, которые вы можете использовать для динамической навигации. –

ответ

0

, если вы хотите использовать стандартный #, то вы можете использовать с помощью JS, на вызов функции сделать: , некоторые ID в основном,

, а затем вы можете проверить на странице загрузки, если есть # там затем вызвать определенную функцию, как:

handleHash: function() { if (!isNaN(parseInt(window.location.hash.replace('#', '')))){ this.showDetails(window.location.hash.replace('#', '')); }