jQueryUI Tab By ID

The jQueryUI tabs widget allows you to select a tab programmaticaly by using a 0-based index. This is handy because sometimes you want to direct a user to a tab without them having to click it. The select() method of the tabs widget allows us to do just that. However, having to keep track of the indexes for each tab doesn't really make sense and hard-coding the index value for a specific tab makes even less sense.

It would be nice if we could select a specific tab by ID. The following function does just that.

function select_tab_by_id(widget_id, tab_id){
   jQuery(widget_id)
   .tabs("select", jQuery(widget_id+" ul a")
   .index(jQuery("[href="+tab_id+"]")));
}

select_tab_by_id("#my_tabs", "#tools");