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

【问题标题】：JQuery UI Nested Tabs - Load AJAX content into a single DIVJQuery UI 嵌套选项卡 - 将 AJAX 内容加载到单个 DIV 中
【发布时间】：2010-02-02 20:56:56
【问题描述】：

全部，

我正在使用 JQuery UI 嵌套选项卡。考虑这样的结构：有 2 个主要选项卡：动物、鸟类。在动物下，有两个选项卡“猫”、“狗”。单击时，“Cats”和“Dogs”选项卡都应通过 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 仍然存在于页面上（处于隐藏状态，但仍可访问），反之亦然。因此，如果两个选项卡都有共同的元素，那将是一个问题。我该如何解决它，以便只有一个空的 Div 并且它被加载并使用当前加载或切换的任何选项卡重新绘制？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

嗯...我可能是错的，但我认为每个选项卡的选项卡内容都需要占位符 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>

注意网址末尾的附加“#”标识符。

【讨论】：

【解决方案2】：

我的回答有点类似。当您单击选项卡时，this post 中的代码会将内容加载到内容容器中。希望它能让你朝着正确的方向前进。

【讨论】：