ajax - 使用 ajax 进行深度链接的 url 中的哈希

Question

我有这段代码可以用一些动画在 div #target 中加载内容。工作正常，但我不知道如何实现代码以使用#hash 更改链接和 url！我怎样才能做到这一点？

编码：

$(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; 
  });
});