JQuery UI 중첩 탭 - 단일 DIV에 AJAX 컨텐츠로드

JQuery UI 중첩 탭을 사용하고 있습니다. 다음과 같은 구조를 생각해보십시오. Animals, Birds라는 두 개의 기본 탭이 있습니다. 동물 아래에는 두 개의 탭 "고양이", "개"가 있습니다.

<div id="fragment-1"> 
    <ul> 
     <li><a href="/public/catstab"><span>Cats</span></a></li> 
     <li><a href="/public/dogstab"><span>Dogs</span></a></li> 
    </ul> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $("#tabs-loading-message").show(); 
    $('#fragment-1').tabs({cache:false, spinner:''}); 
}); 
</script>

내가 "개"에 탭을 전환

, 내가 것으로 나타났습니다 : 그래서, 그들에 대한 코드는 다음과 같이 클릭 할 때 두 탭 "고양이"와 "개는".. AJAX를 통해로드해야한다입니다 '고양이'탭에 대해 생성 된 HTML은 페이지 (숨겨진 상태이지만 여전히 액세스 가능) 및 Vice Versa에 계속 존재합니다. 그래서 두 개의 탭에 공통 요소가있는 경우 문제가 될 수 있습니다. 어떻게 하나의 빈 Div가 있으며이를 가져오고 현재로드되거나 전환 된 탭이 있으면 다시 그릴 수 있습니까?

출처

2010-02-02 Jake

음 ... 내가 틀릴 수도 있지만 각 탭이 동적으로로드 된 경우에도 각 탭의 탭 내용에 대해 자리 표시 자 div가 필요하다고 생각했습니다. 좋아요 :

<div id="fragment-1"> 
    <ul> 
     <li><a href="/public/catstab#cats"><span>Cats</span></a></li> 
     <li><a href="/public/dogstab#dogs"><span>Dogs</span></a></li> 
    </ul> 
    <div id="cats"></div> <-- this is placeholder div 
    <div id="dogs"></div> 
</div>

URL 끝에 '#'식별자가 추가되어 있습니다.

출처

2010-02-03 02:10:05 btelles

나는 약간 비슷한 대답을했다. this post의 코드는 탭을 클릭 할 때 콘텐츠 컨테이너에 콘텐츠를로드합니다. 잘하면 그것은 올바른 방향으로 갈 수있게 해줍니다.

출처

2010-02-03 03:30:36 Mottie

JQuery UI 중첩 탭 - 단일 DIV에 AJAX 컨텐츠로드

답변

관련 문제