title: Getting Target URL from jQuery-UI Tabs
body: <p>I'm working on a project that makes heavy use of jQuery tabs and Ajax. Loading data into the tabs is simplicity itself, but the data in the tabs needs to be filtered by a select box that sits outside the tabs div. </p>
  
  <p>Here's where my problem starts. Let's say my tab makes an Ajax call to the URL "tab1.html." jQuery tabs changes this target into a hash value something like "#ui-tabs-10," but I can get the original URL through the following code:</p>
  
  <pre><code>    $("#tabs").tabs({
          select: function(event,ui) {
              var url = $.data(ui.tab, 'load.tabs');
              ...do stuff with url
          }
      });
  </code></pre>
  
  <p>But I cannot seem to access the ui.tab object outside this event call. So my select box change event ends up looking like this:</p>
  
  <pre><code>var urls = {
      0 : "tab1.html",
      1 : "tab2.html",
      2 : "tab3.html"
  }
  
  $('#selectBox').change(function(){
      var tabs = $("#tabs").tabs();
      var id = $('#selectBox').attr("selectedIndex");
      var selectedTab = tabs("option", "selected");
      var newUrl = urls[selectedTab] + "?id=" + id;
      tabs("url", selectedTab, newUrl);
      tabs("load", selectedTab);
  });
  </code></pre>
  
  <p>My problem is that hash map. I don't need it, and it duplicates info that I've already coded into the tabs div itself.</p>
  
  <pre><code>&lt;div id="tabs"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="tab1.html"&gt;tab1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="tab2.html"&gt;tab2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="tab3.html"&gt;tab3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've exhausted both the docs and the DOM tree in Firebug to no avail. Any ideas on how I can retrieve the href from outside a tab event?</p>
  
  <p>I'm using jQuery UI version 1.7.2. Muchos gracias in advance. You guys are the best.</p>