get the current tab in jQuery UI tabs

后端未结

关注

 11  1122

無奈伤痛 2021-01-01 16:46

I am using jQuery UI Tabs inside of the jQuery UI dialog window.

I\'ve come across an instance, where I need to find the id of the current tab when clicking on one o

11条回答

猫巷女王i (楼主)

2021-01-01 17:28

(This answer is relevant for JQuery UI 1.12 and probably a few versions before.)

It depends what you mean by tab... There is the thing that you click to select a tab and the panel that is displayed because of the click. The thing you click is a list item

that contains an anchor tag with an href attribute that points to the panel id (it's prepended with a '#'). The panel id and href values are set by you (not JQuery). The list item has no id by default, but the anchor element does... it is generated by JQuery and will be something like 'ui-id-88'. To get either the tab id, anchor id or the panel id, you can use the following:

// if you have nested tabs this might not work... in such case, give 
// your parent tab and panel a unique class and use it in selector
var $tabs = $("#tabs");
var tabIndex = $tabs.tabs("option", "active");
var $tab = $tabs.find("li[role=tab]").eq(tabIndex);
var tabId = $tab.attr("id"); // undefined unless set by user
var anchorId = $tab.attr("aria-labelledby"); // or $tabs.find("ul li a.ui-tabs-anchor").eq(tabIndex).attr("id");
var panelId = $tab.attr("aria-controls"); //or $tabs.find(".ui-tabs-panel").eq(tabIndex).attr("id");
// note: panelId will also be in href of anchor with prepended # sign
alert("tabId=" + tabId + ", anchorId=" + anchorId + ", panelId=" + panelId);

0 讨论(0)

查看其它11个回答