Хеш в URL для глубокой связи с AJAX

Question

У меня есть этот код для загрузки содержимого в div #target с некоторой анимацией. Работает нормально, но я не знаю, как реализовать код для изменения ссылки и URL с помощью #hash! Как я могу это сделать?

код:

$(document).ready(function(){
  $("#target").addClass('hide');

  $('.ajaxtrigger').click(function() {   
    var pagina = $(this).attr('href');
    if ($('#target').is(':visible')) {

    }
    $("#target").removeClass('animated show page fadeInRightBig').load(pagina, 
      function() { 
        $("#target").delay(10).transition({ opacity: 1 })
          .addClass('animated show page fadeInRightBig');                        
      }
    );
    return false; 
  });
});

Answer 1

Попробуйте использовать любой роутер javascript. Например, router.js.

Измените ваш код следующим образом (я не проверял, работает ли этот код, но я думаю, что идея должна быть ясной):

$(document).ready(function(){
  var router = new Router();

  //Define route for your link
  router.route('/loadpath/:href', function(href) { 
    console.log(href);
    if ($('#target').is(':visible')) {
      $("#target").removeClass('animated show page fadeInRightBig').load(href, 
        function() { 
          $("#target").delay(10).transition({ opacity: 1 })
            .addClass('animated show page fadeInRightBig');                        
        }
      );
    }
  });

  router.route('', function(){ console.log("default route")});


  $("#target").addClass('hide');

  // Instead of loading content in click handler, 
  // we just go to the url from href attribute with our custom prefix ('/loadpath/').
  // Router will do rest of job for us. It will trigger an event when url hash is        
  // changes and will call our handler, that will load contents 
  // from appropriate url.
  $('.ajaxtrigger').click(function() {
    router.navigate('/loadpath/' + $(this).attr('href'));   
    return false; 
  });
});