如何获取当前所选jQuery UI选项卡的ID？

I know that I can get the (numerical) index of the currently selected tab like this:

我知道我可以得到当前所选标签的(数字)索引,如下所示:

$('.selector').tabs('option', 'selected');

Is there a way to get the ID of the currently selected tab, outside of an event handler? By "ID" I'm referring to the string property (ui.panel.id) in the ui object that's passed in as an argument to an event listener callback - but I'm trying to do it outside of a callback.

有没有办法在事件处理程序之外获取当前所选选项卡的ID?通过“ID”,我指的是ui对象中的字符串属性(ui.panel.id),它作为参数传递给事件监听器回调 - 但我试图在回调之外进行。

I know I can hack together my own solution, but I want to make sure I'm not reinventing the wheel first.

我知道我可以合并自己的解决方案,但我想确保我不是先重新发明*。

I'd would rather work with IDs than indices so that changing the order of my tabs doesn't break my code - it's at least a little more robust and readable.

我宁愿使用ID而不是索引,以便更改我的选项卡的顺序不会破坏我的代码 - 它至少更健壮和可读。

2 个解决方案

#1

As far as I know, selected tab has class ui-tab-selected. You may use

据我所知,选中的选项卡有类ui-tab-selected。你可以用

$('.selector').find('.ui-tab-selected a');

to fetch selected tab. It was element, where href attribute - identifier of active panel.

获取选定的选项卡。它是元素,其中href属性 - 活动面板的标识符。

#2

@Matt Ball

You can select it using the "ui-state-active" class associated with the active tab and then get the id from the inner href link:

您可以使用与活动选项卡关联的“ui-state-active”类来选择它,然后从内部href链接获取id:

var selected_tab_id = $('.ui-state-active a', '#ui-tabs-widget').attr('href').split('#')[1];

'#ui-tabs-widget' is the id for your actual tabs widget so replace it with it so the active tab is selected only in the widget you wanted to and not in every one in the page.

'#ui-tabs-widget'是实际标签窗口小部件的ID,因此请将其替换为,因此仅在您想要的窗口小部件中选择活动选项卡,而不是在页面中的每个窗口小部件中选择。

#1