如何在 Jquery UI Tabs 中获取选定的选项卡面板元素？

Question

问题。我有多个选项卡，它们的内容是通过ajax加载的，因此选项卡面板的div id是动态分配的。我有一个表单，由 这个 jquery 插件 通过绑定到 tabs.load 事件的回调函数进行 ajaxified我向它传递了一个参数 ui.panel，以便 ajaxForm() 知道加载结果的目标：

function initAjaxForms(loadtab)
{
   $('form').ajaxForm({target:loadtab, success:initAjaxForms});
} 

这工作正常，除非当我提交表单并且 PHP 将其返回为无效时，我无法再 ajaxify 它（的当然，该函数是在没有 loadtab 参数的情况下调用的）。完美的解决方案是为选项卡提供更多选项，以便我可以执行以下操作：

function initAjaxForms()
{
   var selected = $('tabs').tabs('option', 'selectedpanel');
   $('form').ajaxForm({target:selectedpanel, success:initAjaxForms});
} 

但这显然不是它。有什么想法吗？

Answer 1

选择未使用 .ui-tabs-hide 隐藏的 .ui-tabs-panel：

var selectedPanel = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)");

Answer 2

也许 jqueryUI 已经改变，接受的答案对我不起作用。这是有效的：

$("#tabs div.ui-tabs-panel[aria-hidden='false']")

Answer 3

我最终通过一点技巧解决了这个问题，但我觉得这不是一个完美的解决方案：

function initAjaxForms()
{
    var selected = $('#tabs').tabs('option', 'selected');
    var selectedtab = '#tabs > div:eq('+selected+')';
    var selectedtabelement = $(selectedtab).get(0);

    $('form').ajaxForm({ target:selectedtabelement, success:initAjaxForms});

}

有人有更好的主意吗？

Answer 4

我一直遇到这个问题，虽然这是一个老问题，但正是这个问题让我找到了这个答案，该答案有效：

var selectedPanel = $("#yw1 div.ui-tabs-panel:not(:has(.ui-tabs-hide))");

Answer 5

function getSelectedTab(tabID){
    return $(tabID).find($(tabID+" .ui-tabs-nav .ui-tabs-selected a").attr('href'));
}
var selectedPanel = getSelectedTab('#tabs');

这将为您提供所选选项卡窗格的对象。

Answer 6

这是更简单的版本：

function getSelectedTab(tabID){
   return $(tabID).find("[aria-expanded=true]");
}

var selectedPanel = getSelectedTab('#tabs');

Answer 7

从 http://api.jqueryui.com/tabs/#option-active 您可以这样做：

var activeTab = this.$tabs.tabs("option", "active");
_this.$tabs.find(">div")[activeTab]