아약스와의 깊은 연결을위한 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

시도는 자바 스크립트 라우터를 사용합니다. 예 : 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; 
    }); 
});