Rdio.com은 앵커 기반 하이퍼 링크를 어떻게합니까?

Question

예를 들어 http://www.rdio.com/#/aboutus/을 방문하면 자신에 관한 정보 페이지가로드되는 것을 볼 수 있습니다. 이제는 바닥 글의 '회사 소개'링크를 가리거나 조사하면 간단히/aboutus를 가리 킵니다. 나는 또한 View Source를 체크했고 링크 자체에는 엄연히 어떤 마술도 일어나지 않았다.

jQuery가 모든 <A> 요소를 업데이트하고 앵커 기반 해시 태그 URL 접근 방식으로 바꾸어야한다고 생각하고 있습니다.

어떻게하면 내 프로젝트에서이 기능을 사용할 수 있습니까?

감사합니다.

Answer 1

앵커는 연결하기 위해 있습니다. 진정한 마술은 Ajax와 다른 동적 JavaScript 기반 콘텐츠입니다. 다음과 같은 링크가 보일 수있는 작업은 다음과 같습니다 흥미로운

$('.some-link').click(function(e) { 
    // Allow for linking: 
    window.location.hash = '#/' + this.getAttribute('href'); 

    // Start loading the content: 
    $.ajax({ 
     // ... 
     success: function() { 
      // New content gets put in 
     } 
    }); 

    // Prevent the real link from being followed: 
    e.preventDefault(); 
});