JQuery UI选项卡-加载AJAX选项卡内容

全部,

我正在使用JQuery UI嵌套选项卡。考虑这样的结构：主要有2个标签：动物，鸟类。在“动物”下，有两个标签“猫”、“狗”。选中时，选项卡“猫”和“狗”都应通过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>

$（文档）.ready（函数（）
{
$（“#制表符加载消息”）.show（）；
$（'#fragment-1'）。制表符（{cache:false，微调器：'}）；
});

问题是，我想维护一个公共div来加载AJAX URL。例如：当您单击猫或狗时，这些选项卡的内容应该进入

“

，而不是进入

“猫”

div和

“狗”

div。 从某种意义上说，加载应该是可重用的，如果从

“Dogs”

选项卡内的任何位置调用

重新加载（“Dogs”）

，它应该重新加载

“Dogs”

选项卡内容

---

如何实现这一点？

只需查看文档，就不会有任何关于如何实现这一点的信息。不过，不使用tabs小部件并为基本选项卡功能定义自己的单击事件非常简单

<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'));
   });
}):

$（文档）.ready（函数（）{
$（'#fragment-1A'）。单击（函数（）{
$（'#commonDiv'）.load（$（this.attr（'href'））；
});
}):

---

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

不确定我是否理解您的要求；据我所知，如果您给所有选项卡赋予相同的标题atribute，UI将重新使用相同的DIV加载内容，而不是为每个选项卡创建一个新的DIV并根据需要隐藏或显示。是好东西，因为浏览器不会因为加载了很多div而变得很重，但是隐藏了很多div…

你是怎么做到的。你是使用jquery标签还是使用了自己的ajax劫持（不是很难，但是你仍然需要回答中提到的css…）