1

全部，

我正在使用 JQuery UI 嵌套选项卡。考虑这样的结构：有 2 个主要选项卡：动物、鸟类。在动物下，有两个选项卡“猫”、“狗”。选择“Cats”和“Dogs”选项卡时都应该通过 AJAX 加载。所以，它们的代码是这样的：

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab" title="Cats"><span>Cats</span></a></li>
       <li><a href="/public/dogstab" title="Dogs"><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>

问题是，我想维护一个通用 div 来加载 AJAX url。例如：当您单击 Cats 或 Dogs 时，这些选项卡的内容应该进入"<div id='commonDiv'></div>而不是进入"cats"div 和"dogs"div。从某种意义上说，加载应该是可重用的，如果reload("Dogs")从选项卡内的任何位置调用"dogs"，它应该重新加载"dogs"选项卡内容。

我怎样才能做到这一点？

4

2 回答 2

2

只看文档，什么都没有弹出来如何做到这一点。不过，不使用选项卡小部件很容易，并为基本选项卡功能定义您自己的点击事件。

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

$(document).ready(function(){
   $('#fragment-1 a').click(function(){
      $('#commonDiv').load($(this).attr('href'));
   });
}):

不过，您需要定义自己的 css 样式，因为它看起来像 tabs 小部件为您做的那样。

于 2010-02-03T21:15:17.227 回答
0

不确定我是否理解你；据我所知，如果您为所有选项卡提供相同的标题属性，UI 将重新使用相同的 DIV 来加载内容，而不是为每个选项卡创建一个新选项卡并根据需要隐藏或显示。是一件好事，因为浏览器并没有因为加载了很多 DIVS 但被隐藏而变得如此沉重......

于 2010-05-08T14:47:05.873 回答