当前位置: 代码迷 >> Web前端 >> 获得jQueryUI Tabs的当前tab panel
  详细解决方案

获得jQueryUI Tabs的当前tab panel

热度:739   发布时间:2012-08-29 08:40:14.0
取得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!