====== 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.