取得jQueryUI Tabs的当前tab panel

阅读更多

节选并翻译自 http://stackoverflow.com/questions/300078/jquery-ui-tabs-get-currently-selected-tab-index

虽然该帖子已经有些时日， 不过我没有发现有人提及这个方案：

如果不在Tab的事件 （tab events ，http://jqueryui.com/demos/tabs/#events ） 中， 如何取得 当前tab （ "selected tab" ）-- 当前选中的 tab 的下面的显示内容的panel。

我有一个简单的方式...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');

你可以很容易的得到 索引号 index， 完全正确， 下面是其文档中提及的方式

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

不过你可以用我说的方式来获取索引号 index 或者其他任何当前panel的属性..

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");

注： 如果你使用了iframe  变量，那么

.find('.ui-tabs-panel:not(.ui-tabs-hide)')

将帮助你很容易的获得  iframe中的当前tab。

---记住，jQuery 已经完成了其艰巨的工作， 你不必重复发明轮子！


译者注：
jQueryUI Tabs 的API中没有 取得jQueryUI Tabs的当前tab panel 的函数/

我常常需要使用 jQuery 的AJAX 重现填充当前Tab的内容， 因此 取得jQueryUI Tabs的当前tab panel  非常重要。

引用

I know this thread is old, but something I didn't see mentioned was how to get the "selected tab" (Currently dropped down panel) from somewhere other than the "tab events". I do have a simply way ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');
And to easily get the index, of course there is the way listed on the site ...

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
However, you could use my first method to get the index and anything you want about that panel pretty easy ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");
        //  etc ....
PS. If you use an iframe variable then .find('.ui-tabs-panel:not(.ui-tabs-hide)'), you will find it easy to do this for selected tabs in frames as well. Remember, jQuery already did all the hard work, no need to reinvent the wheel!