title: jQuery - trapping tab select event
body: <p>I'm a jQuery noob and I'm trying to figure out how to trap the tab selected event.
  Using jQuery 1.2.3 and corresponding jQuery UI tabs (not my choice and I have no control over it).  It's a nested tab with the first level div name - tabs.  This is how I initialized the tabs</p>
  
  <pre><code>$(function() {
         $('#tabs ul').tabs();
  });
  
  $(document).ready(function(){
      $('#tabs ul').tabs('select', 0); 
  }); 
  </code></pre>
  
  <p>I'm not able to figure out how to trap any of the events or properties (selected tab, when tab clicked, etc).  Would appreciate any help on this...</p>
  
  <p>I tried things like:</p>
  
  <pre><code>$('#tabs ul').bind('tabsselect', function(event, ui) {
      selectedTab = ui.index;
      alert('selectedTab : ' + selectedTab);
  });
  
                (OR)
  
  $('#tabs').bind('tabsselect', function(event, ui) {
  </code></pre>
  
  <p>with no success.</p>
  
  <p>Below is the markup</p>
  
  <pre><code>&lt;div id="tabs"&gt;
  &lt;UL&gt;
      &lt;LI&gt;&lt;A href="#fragment-1"&gt;&lt;SPAN&gt;Tab1&lt;/SPAN&gt;&lt;/A&gt;&lt;/LI&gt;
      &lt;LI&gt;&lt;A href="#fragment-2"&gt;&lt;SPAN&gt;Tab2&lt;/SPAN&gt;&lt;/A&gt;&lt;/LI&gt;
      &lt;LI&gt;&lt;A href="#fragment-3"&gt;&lt;SPAN&gt;Tab3&lt;/SPAN&gt;&lt;/A&gt;&lt;/LI&gt;
      &lt;LI&gt;&lt;A href="#fragment-4"&gt;&lt;SPAN&gt;Tab4&lt;/SPAN&gt;&lt;/A&gt;&lt;/LI&gt;
  &lt;/UL&gt;
  
  &lt;DIV id=fragment-1&gt;
  &lt;UL&gt;
      &lt;LI&gt;&lt;A href="#fragment-1a"&gt;&lt;SPAN&gt;Sub-Tab1&lt;/SPAN&gt;&lt;/A&gt;&lt;/LI&gt;
      &lt;LI&gt;&lt;A href="#fragment-1b"&gt;&lt;SPAN&gt;Sub-Tab2&lt;/SPAN&gt;&lt;/A&gt;&lt;/LI&gt;
      &lt;LI&gt;&lt;A href="#fragment-1c"&gt;&lt;SPAN&gt;Sub-Tab3&lt;/SPAN&gt;&lt;/A&gt;&lt;/LI&gt;
  &lt;/UL&gt;
  &lt;/DIV&gt;
  .
  .
  .
  
  &lt;/DIV&gt;
  </code></pre>