2012-06-22 5 views
0

JQuery로 가장 기본적인 탐색을 수행하려고하는데 비참하게 실패합니다.JQuery 사이트 탐색

다양한 콘텐츠가있는 여러 개의 .html 파일이 있지만 영구적 인 페이지를 보유하고 div에 콘텐츠를로드하려고합니다. 나는 순간에 구현 탐색이 방법 :

에서는 event.preventDefault()
(# 내-컨텐츠 사업부) :

  1. 사용자 NavLink1
  2. JQuery와 다음을 실행 클릭합니다. 로드 (NavLink1-content);
  3. URL이 이제 "www.mydomain.com/#NavLink1"로 표시됩니다.
사용자가 www.mydomain.com/NavLink1을 탐색하고 콘텐츠가 올바르게로드되는 반면 세계에서 # NavLink1에 대한 직접 연결을 구현하거나 시스템을 구현할 수있는 방법은 무엇입니까?

하나의 탐색 링크에 대한 나의 네비게이션 코드 : 당신은 최신 브라우저 버전을 지원 괜찮다면

$("#story-button-link").click(function(event){ 
     $(this).addClass("selected"); 
     $("#landing-page-article").load('./story.html', function() { 
      $(document).ready(function() { 
      }); 
     }); 
     return false; 
    }); 
+1

당신이 찾고있는 것은 서버 사이드 URL 재 작성 - 아파치에서 * 쉬운 * IIS의 crapshoot입니다. – iambriansreed

+0

.htaccess에 액세스 할 수 있으므로이 방법을 사용해야합니까? 지금은 CORS에서 내 쓸데없는 시도 만 포함합니다. (내 호스트는 똥 같아서 정말 지원하지 않는다고 생각합니다.) –

+1

이것은 유일한 방법입니다. 다른 것은 해킹 될 수 있으며 xbrowser 친화적이지 않습니다. – iambriansreed

답변

3

, 당신은 HTML5 이력 관리 기능을 사용할 수 있습니다 - pushState을 구체적으로, 당신을 수 있습니다 페이지를 다시로드하지 않는 동안 URL을 yourdomain.com/NavLink1으로 변경하면 동일한 작업을 수행 할 수 있지만 URL을 그대로 유지할 수 있습니다.

오래된 브라우저를 사용하는 경우 History.js을 사용하면 브라우저 간 호환성 문제를 해결할 수 있습니다. 최신 브라우저에서는 HTML5 기능을 사용하고 이전 버전에서는 해시 변경 사항으로 되돌립니다.

+0

불행히도 저는 오래된 브라우저를 기대하고 있습니다. 이것은 RSVP가 포함 된 웨딩 웹 사이트이기 때문에 아마도 IE를 지원해야합니다. –

+0

@Chad_C : 내 솔루션 *은 IE를 지원합니다 - History.js에 관한 부분입니다. 이 답변이 도움이 되었다면이 질문을 해결 된 것으로 표시 할 수 있도록 정답으로 사용하십시오. 감사! –

+0

불행히도 문제는 지속됩니다 - History.js가 포함되어 있으며 혼란스러운 문서를 따라 왔습니다. 나는 hashbang을 제거하고/home,/navlink1 등과 같은 일반 링크를 사용하여 시도해 보았고 단순히 404를 리턴했다. 나는 여전히 리프레쉬를 지원할 적절한 솔루션을 연구하려고 노력하고있다. –