【问题标题】:JQuery UI Tabs - replace tab and contentsJQuery UI 选项卡 - 替换选项卡和内容
【发布时间】:2010-04-03 23:43:57
【问题描述】:

替换当前选择的选项卡及其内容的最佳方法是什么?内容是使用 jquery 动态生成的,而不是通过 URL 加载的。

我需要在任何选项卡代码或选项卡事件处理程序(显示、添加等)之外执行此操作。页面上的其他地方有一个链接,单击时应执行以下操作:

  • 更改标签的标题
  • 更改选项卡的类名
  • 清除tabcontent div的所有元素
  • 更改 tabcontent div 的类名
  • 在 tabcontent div 中生成新内容

请注意,此链接的 click() 处理程序的唯一引用是 JQuery 选项卡对象 ($Tabs)。我可以使用$Tabs.tabs('option','selected') 获取选定的选项卡。但是如何获得对选定选项卡的选项卡和面板的引用?在 jquery 选项卡处理程序(显示、添加等)内部,我可以访问 ui.tabui.panel,但是有没有办法从选项卡选项中获取它们?

简单地删除当前选定的选项卡,然后在同一索引位置添加一个新选项卡会更好吗?我想我必须将生成选项卡内容的代码放入 add() 处理程序中。

编辑:我很惊讶没有人有任何建议。我通过删除当前选定的选项卡然后在同一位置添加一个新选项卡来工作。在快速浏览器中,这是一个不错的解决方案,但在使用慢速 javascript 的浏览器中,您实际上可以看到选项卡消失,然后出现一个新选项卡。它有效,但它确实不是最佳的。

【问题讨论】:

    标签: jquery jquery-ui jquery-ui-tabs


    【解决方案1】:

    FWIW - 我在尝试引用动态创建的选项卡内容 div 容器来修改内容时遇到了同样的问题。我能够通过以下方式引用 div 容器“选项卡”的内容:

    <p>
    $("#ui-tabs-1").html
    </p>
    

    其中 1 是我需要修改其容器的 ajax 选项卡的索引。希望对您有所帮助。

    【讨论】:

      【解决方案2】:

      不要忘记,标签面板(=content) index 不是从零开始的,而选定标签的索引是!

      所以'#ui-tabs-1'中的'1'就是'ui.index' (= selected tab) + 1的值!

      【讨论】: