title: jQuery tabs - getting newly selected index
body: <p>I've previously used <a href="https://jqueryui.com/tabs/" rel="nofollow noreferrer"><code>jquery-ui tabs</code></a> extension to load page fragments via <code>ajax</code>, and to conceal or reveal hidden <code>div</code>s within a page.   Both of these methods are well documented, and I've had no problems there.</p>
  
  <p>Now, however, I want to do something different with tabs.  When the user selects a tab, it should reload the page entirely - the reason for this is that the contents of each tabbed section are somewhat expensive to render, so I don't want to just send them all at once and use the normal method of toggling 'display:none' to reveal them.</p>
  
  <p>My plan is to intercept the tabs' <code>select</code> event, and have that function reload the page with by manipulating document.location.</p>
  
  <p>How, in the <code>select</code> handler, can I get the newly selected tab index and the html LI object it corresponds to?</p>
  
  <pre><code>$('#edit_tabs').tabs(  {
          selected: 2,     // which tab to start on when page loads
          select: function(e, ui) {
              var t = $(e.target);
              // alert("data is " +  t.data('load.tabs'));  // undef
              // alert("data is " +  ui.data('load.tabs'));  // undef
  
              // This gives a numeric index...
              alert( "selected is " + t.data('selected.tabs') )
              // ... but it's the index of the PREVIOUSLY selected tab, not the
              // one the user is now choosing.  
              return true;
  
              // eventual goal is: 
              // ... document.location= extract-url-from(something); return false;
          }
  });
  </code></pre>
  
  <p>Is there an attribute of the event or ui object that I can read that will give the index, id, or object of the newly selected tab or the anchor tag within it? </p>
  
  <p>Or is there a better way altogether to use tabs to reload the entire page?</p>