====== jQuery select UI tabs by id (and index) ====== With the latest versions of jQuery is not not trivial to select a tab by ID as it was before. Previously you could use: $("#tabs").tabs("select", "#tab-1"); now is more difficult since that function has been deprecated and the ufficial method is only $("#tabs").tabs("option", "active", index); where index is the ordinal number counting tabs from left to right. Now, if you can be sure the index never change you can use $(mytabs).tabs("option", "active", $("#tab_header").index()); but if the number of tabs change it needs a specific function intended to iterate the tabs, incrementing an index of the tabs counted before reaching the id we were looking for. This is the function. //tabsId Id of the div containing the tab code. //srcId Id of the tab whose id you are looking for function id2Index(tabsId, srcId) { var index=-1; var i = 0, tbH = $(tabsId).find("li a"); var lntb=tbH.length; if(lntb>0){ for(i=0;i0){ index=i; } } } return index; } So, having something such as
you can activate #tab-6 with $("#tabs").tabs("option","active", id2Index("#tabs","#tab-6")); ===== How does it works? ===== I read the tabs "a href" and get the ID from there. When it is found in the loop, I read the id that jQuery add automatically for every tab into the dom when the UI tabs is initialized.