The correct method for capturing tab selection event is to set a function as the value for the select option when initializing the tabs (you can also set them dynamically afterwards), like so:
$('#tabs, #fragment-1').tabs({
select: function(event, ui){
// Do stuff here
}
});
You can see the actual code in action here: http://jsfiddle.net/mZLDk/
Edit: With the link you gave me, I've created a test environment for jQuery 1.2.3 with jQuery UI 1.5 (I think?). Some things obviously changed from then. There wasn't a separate ui object which was separated from the original event object. The code looks something like this:
// Tab initialization
$('#container ul').tabs({
select: function(event) {
// You need Firebug or the developer tools on your browser open to see these
console.log(event);
// This will get you the index of the tab you selected
console.log(event.options.selected);
// And this will get you it's name
console.log(event.tab.text);
}
});
Phew. If there's anything to learn here, it's that supporting legacy code is hard. See the jsfiddle for more: http://jsfiddle.net/qCfnL/1/
Edit: For those who is using newer version of jQuery, try the following:
$("#tabs").tabs({
activate: function (event, ui) {
console.log(event);
}
});