HTML5 div에 외부 콘텐츠로드 및 pushState() 사용

Question

메인 페이지 "index.html"이 있습니다. 이 메인 페이지는 HTML5에서 수행되는 사이트 방문입니다. 사업부는 "contentDiv 불렀다

"about.html 기본 ","work.html ","portfolio.html ","contact.html "그래서

이 페이지의 모든 : 사이트의 다른 페이지가 있습니다 "에 따라 사본/텍스트가 있습니다. 사용자가 "index.html"을 통해 사이트에 들어가고 사용자가 nav 링크 중 하나를 클릭하면 다음과 같이됩니다.

정보 | 일 | 포트폴리오 | 연락처

"index.html"페이지는 JQuery의 load() 호출을 사용하여 클릭 한 페이지의 "contentDiv"내용을로드 한 다음 애니메이션을 사용하여로드 된 div에서 슬라이드합니다.

사이트가 이전 버전과 호환되므로 Javascript가 비활성화 된 경우 load() 호출을 통해 콘텐츠를로드하는 대신 "index.html"을 클릭하는 대신 클릭 한 페이지로 이동합니다. 그런데

는 탐색 링크 (들)과 같이 코딩 :은 "index.html을"한 번

<a href="about.html" title='About'>About</a> 

는 pushState()를 사용하여 URL이 업데이트하여, 요청 된 내용을로드합니다. 링크 다음 pushState() "에 대한"에 사용자가 클릭에 URL을 업데이트한다면 :

"http://www.abc.com/about.html"

이유 나는 어떤 해시에 삽입하지 않은 href 태그는 Javascript가 비활성화 된 경우를 대비해 사이트에 대체 기능을 제공하기 때문에 이렇게하면 사용자는 "index.html"대신 요청한 페이지 ('about.html')로 이동할 수 있습니다.

지금까지 모든 것이 잘 작동하지만 여기에 문제가 있습니다. 사용자가 "index.html"을 사용하고 섹션 중 하나 (예 : "about.html")를 클릭하면 내용이로드되고 URL은 pushState()를 통해 업데이트됩니다. 이제 URL은 "http://www.abc.com/about.html"입니다. 이제 사용자가 페이지 ("index.html")를 새로 고치면 load() 호출을 수행하는 "index.html"대신 "about.html"이로드됩니다.

내가이 같은 탐색 HREF 태그를 코딩하는 경우 말할 수 있습니다 :

는

<a href="#about" title="about">About</a> 

다음 URL은의 해시를 가진 끝납니다. 그리고 복사하여 "http://www.abc.com/#about"링크를 사용자에게 이메일로 보내면 사용자가 javascript가 비활성화 된 상태에서 브라우저를 통해 링크를 열려고하면 "about"을 (를) 얻을 수 없습니다. .html "링크에는"about.html "대신"#about "이 있기 때문에.

내가하려는 것은 실제로 할 수있다. 나는 어떻게 접근해야할지 모른다. 누구든지이 일에서 나를 도울 수 있다면 그것은 좋을 것입니다.

나를 용서해주십시오.

감사합니다.

Answer 1

결국 모든 navrefs를 ""로 설정했습니다. document.ready() 함수에서 hrefs 값을 설정합니다.

$('a[rel=nav]').attr('href', ''); 

감사합니다.

Answer 2

이 코드는 자바 스크립트를 사용하지 않는 사용자를 지원하고 지원해야하는 목표를 달성합니다. 당신이에 대한 링크를 클릭하고 새로 고칠 때 그들이 작업하는 경우

$('a').click(function() { 
    window.location.hash = $(this).attr('src'); 
    return false; 
} 

귀하의 URL은 http://www.yoursite.com/#about.html 같이 보일 것입니다. 아약스 사이트를 만드는 방법에 대해 자세히 알고 싶다면이 블로그를 방문하십시오. Css-Tricks.com