JQuery UI Вложенные вкладки - Загрузка содержимого AJAX в один DIV

Question

Все,

Я использую JQuery UI вложенных вкладок. Рассмотрим структуру следующим образом: Есть 2 основных вкладки: Животные, Птицы. В разделе «Животные» есть две вкладки «Кошки», «Собаки». Обе вкладка «Кошки» и «собаки» должна быть загружена с помощью AJAX при нажатии .. Таким образом, код для них это что-то вроде этого:

<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> 

При переключении вкладок «Собаки», я заметил, что HTML, который был создан для вкладки «Кошки», все еще существует на странице (в скрытом состоянии, но все еще доступен) и Vice Versa. Поэтому, если обе вкладки имеют общие элементы, это будет проблемой. Как я могу исправить ее так, что есть только одно пустое Div, и оно загружается и перекрашивается с любой вкладкой, загруженной в настоящее время или переключенной?

Answer 1

Хм ... Я мог ошибаться, но я думал, что вам нужны разделители-заполнители для содержимого вкладок каждой вкладки, даже если каждая вкладка динамически загружена. Например:

<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-адреса.

Answer 2

Я ответил на что-то подобное. Код от this post загружает содержимое в контейнер содержимого при нажатии на вкладку. Надеюсь, это заставит вас идти в правильном направлении.