How to insert JavaScript upon showing a jQuery ui tab?

Question

I want to run a JavaScript function on my page, but only when a tab is shown.

Actually have two questions. I am not using ajax tabs, so would I put my JavaScript in the 'load' or 'show' callback, if I only want the code to run once the tab is shown?

Depending on the answer above, what would my code look like to accomplish the following:

I want to have it like this

• when tab 1 is shown/loaded
• -->insert JavaScript here
• when tab2 is shown/loaded
• -->insert different JavaScript here
• when tab3 is shown/loaded
• -->insert different JavaScript here
• etc.

Answer 1

just a quick guess:

$('#foo').tabs({
    show: function(event, ui) {
        if(ui.index == 0)
        {
         //tab 1 is clicked
        }
        else if(ui.index == 1)
        {
         //tab 2 is clicked
        }
        else if(ui.index == 2)
        {
         //tab 3 is clicked
        }
    }
});

You could also use a switch instead of the else ifs :)
Edit: Changed onShow to show as it was changed in jQuery.