I am sorry if this has been covered earlier. I have a newbie question regarding events in tabs using jquery 1.3.2 and jquery.ui 1.7.2

The following code shows my tabs and works like charm.

2. <script type="text/javascript">
3. //<![CDATA[
4.    $(function(){
5. 
   
6.       $tabs = $("#MainTab");
7.       $tabs.tabs();
8.       $tabs.show();
9. 
   
10.    });
11. //]]>
12. </script>

However I need to store the selected tab in a variable and have tried onclick and onbeforeclick to no avail.

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

Also tried this

1. $('#MainTab').bind('tabsselect', function(event, ui) {
   
   
      var $tabs = $('#MainTab').tabs();
      var selected = $tabs.tabs('option', 'selected');
   
   
   alert(selected);
   });

Can you tell me where do I need to put in these codes (if they are the correct codes) or do I need to add some code that I am not aware of.

Thanks for your help.

Hazi