jQuery UI 탭 : Ajax 내의 Ajax

Question

jQuery UI 탭을 사용하여 다중 페이지 웹 사이트를 SPA로 다시 작성하려고합니다. 셸 페이지에서 한 탭은 페이지 내의 id를 참조하고 나머지 탭은 AJAX를 통해 다른 페이지를로드합니다. 문제는 learn.html 내에서 탭을 클릭에서 발생

<div id="tabs2"> 
    <ul id="nav2"> 
     <li><a href="#about">About Us</a></li> 
     <li><a href="ajax/sponsors.html">Sponsors & Donors</a></li> 
     <li><a href="ajax/staff.html">Staff & Board</a></li> 
     <!--etc.--> 
    </ul> 
    <div id="about"> 
     <!--blah blah blah--> 
    </div> 
</div> 

: 나는 같은 방식으로 설정되어 UI 탭의 또 다른 세트가, learn.html 내

<div id="tabs"> 
    <ul id="nav"> 
     <li><a href="#home">HOME</a></li> 
     <li><a href="ajax/learn.html">LEARN</a></li> 
     <li><a href="ajax/listen.html">LISTEN</a></li> 
     <li><a href="ajax/support.html">SUPPORT</a></li> 
     <!--etc.--> 
    </ul> 
    <div id="home"> 
     <!--blah blah blah--> 
    </div> 
</div> 

: 그것은 다음과 같이 보입니다 이벤트를 이 AJAX 탭 내의 AJAX 탭 중 하나를 클릭하면 창에 거품이 생기고 sponsors.html 또는 셸 페이지 대신로드됩니다.

event.stopPropagation()을 시도했지만 작동하지 않았습니다. 탭에 event.preventDefault을 사용하면 처음에는 탭 기능을 사용할 수 없었습니다. 그 밖의 무엇을 할 것입니까?

Answer 1

ajax 호출의 결과를 특정 div에 추가 할 수 있습니다. ajax 호출의 성공 함수.

Answer 2

탭 또는 앵커 클릭시 preventDefault를 호출 하시겠습니까? 앵커 클릭에 대해 별도의 처리기를 설정해야 할 수도 있습니다. 내 문제는 이제 사라

$("ul#nav2 li a").click(function(e) { 
    e.preventDefault(); 
}); 

Answer 3

...

내가 AJAX를 통해로드 한 페이지는 자신의 문서 타입과 머리 태그 전체 오두막을 가지고 있었다. 제거한 후에는 더 이상 문제가 없었습니다.