title: jQuery UI, how to preselect a tab
body: <p>I've read this - <a href="https://stackoverflow.com/questions/9078412/preselecting-ajax-enabled-tab-in-jquery-ui-tabs">Preselecting ajax-enabled tab in jquery UI tabs</a>
  and tried the API docs... </p>
  
  <p>here is the most basic code...
  <a href="http://jsfiddle.net/Xa2ur/" rel="nofollow noreferrer">http://jsfiddle.net/Xa2ur/</a></p>
  
  <p>I want to be able to specify which tab is selected, but the syntax I can find doesn't work.</p>
  
  <p>I will eventually pass a variable, but if I can't get the hard code to work, what good is taking the extra step.</p>
  
  <p>any help - and "why" what I did didn't work is GREATLY appreciated.</p>
  
  <p>the code</p>
  
  <pre><code>$( function() {
      $( "#tabs" ).tabs({
          beforeLoad: function( event, ui ) {
              ui.jqXHR.error( function() {
                  ui.panel.html( "Couldn't load this tab. We'll try to fix this as soon as possible." );
              });
          }
      });
  });
  </code></pre>
  
  <p>-- Some other code --</p>
  
  <pre><code>&lt;div id="tabs" &gt;
          &lt;ul&gt;
              &lt;li class="firsttab" &gt;&lt;a href="#tabs-1" &gt;Wedding&lt;/a&gt;&lt;/li&gt;
              &lt;li class="" &gt;&lt;a href="#tabs-2" &gt;Gig Feb 2013&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="#tabs-3" &gt;Homecoming&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="tabs-1" &gt;
              &lt;p&gt;Description: Wedding Info&lt;/p&gt;
              &lt;p&gt;photos&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="tabs-2" &gt;
              &lt;p&gt;Description: A gig @ TT the Bears&lt;/p&gt;
              &lt;p&gt;blog&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="tabs-3" &gt;
              Stuff
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
          $( "#tabs" ).tabs( "option", "active", 2 );
          // i HAVE also tried - $('#tabs').tabs({ selected: "2" });
      &lt;/script&gt; 
  </code></pre>