0

全部，

我正在使用 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 并且它被加载并使用当前加载或切换的任何选项卡重新绘制？

4

2 回答 2

0

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

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

于 2010-02-03T02:10:05.923 回答
0

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

于 2010-02-03T03:30:36.377 回答