Need currently selected tab ID for jQuery tabs

Question

I know I can get the index of the currently selected tab but can I somehow get to the ID (the equivalent of the ui.panel.id if this were triggered by an tab event...but it's not) of the currently selected tab? I'd prefer not to use the index because ordering of the tabs might change. I prefer not to use the style markups as those may change in future releases. Is there a method for this? If not, can I somehow use the index to access this (maybe even by accessing the panel object first)? Any other ideas?

Answer 1

You can use the :visible pseudo-selector to target the visible panel:

$("#tabs .ui-tabs-panel:visible").attr("id");

It's worth noting that you can retrieve the active tab from the activate event:

$("#tabs").tabs({
    activate: function (event, ui) {
        console.log(ui.newPanel[0].id);
    }
});