散列在URL深层链接与AJAX

Question

我有这段代码加载内容在一个div #target与一些动画。工作正常，但我不知道如何实现代码来更改#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; 
    }); 
});