Question

所有

我正在使用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网址。例如：当您点击Cats或Dogs时，这些标签的内容应该进入"<div id='commonDiv'></div>，而不是进入"cats" div和"dogs" div。从某种意义上说，加载应该是可重用的，如果从reload("Dogs")标签内的任何位置调用"dogs"，则应重新加载"dogs"标签内容。

我怎样才能做到这一点？

Answer 1

只是看看文档，不知道如何做到这一点。不过很容易就不使用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'));
   });
}):

您需要定义自己的CSS样式，因为看起来像标签窗口小部件会为您执行此操作。

Answer 2

不确定我是否对你说不好;据我所知，如果你给所有标签赋予相同的属性，UI将重新使用相同的DIV来加载内容，而不是为每个标签创建一个新标签，并根据需要隐藏或显示。这是一件好事，因为浏览器没有加载很多DIVS而是隐藏的重量......

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

2 个答案: