JQuery UI嵌套选项卡-将AJAX内容加载到单个DIV中

全部,

我正在使用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>

---

当我将选项卡切换到Dogs时，我注意到为Cats选项卡生成的HTML仍然以隐藏状态存在于页面上，但仍然可以访问，反之亦然。因此，如果两个选项卡都有公共元素，这将是一个问题。。我如何修复它，使其只有一个空Div，并使用当前加载或切换的选项卡加载和重新绘制？

嗯……我可能错了，但我认为每个选项卡的选项卡内容都需要占位符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末尾的附加标识符。

我回答了一些类似的问题。单击选项卡时，源代码将内容加载到内容容器中。希望它能让你朝着正确的方向前进