title: jQuery tabs selecting specific tab
body: <p>I have a page containing a set of jQuery tabs.  All the tabs point at the same target div, but load it with different content via ajax.  When I perform the initial full page load I need to set the active tab differently depending upon various factors.  The content in the target div is already set on the server for this initial load, so I don't need to click the tab, I just need to set the correct tab to 'selected'.  I have tried setting the class of the relevant "li" html element to "ui-tabs-selected".  This has the initial desired effect, but once the page is loaded then on selecting another tab the preselected one does not switch off, leaving two tabs selected.</p>
  
  <p>So, does anyone know an alternative way to preselect a tab (without causing it to be clicked), or a solution to the strange "ui-tabs-selected" behaviour that I am seeing.</p>
  
  <p>Thanks.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function() {
          $("#panelTabs").tabs({
              ajaxOptions: {
                  error: function(xhr, status, index, anchor) {
                      $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible.");
                  }
              }
          });
  
          $("#panelTabs").tabs({
              select: function(event, ui) {
                  getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
              }
          });
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>And the C# fragment that builds the UL:</p>
  
  <pre><code>StringBuilder tabsLiteral = new StringBuilder();
              tabsLiteral.Append("&lt;ul&gt;");
              foreach (KeyValuePair&lt;string, Tab&gt; kvp in tabs)
              {
                  tabsLiteral.Append("&lt;li&gt;");
                  // Note - the kvp.Value.URI determines what should happen when the Tab is clicked
                  tabsLiteral.Append("&lt;a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\"&gt;" + kvp.Value.Caption + "&lt;/a&gt;");
                  tabsLiteral.Append("&lt;/li&gt;");
              }
              tabsLiteral.Append("&lt;/ul&gt;");
              _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString()));
  
              HtmlGenericControl ctl = new HtmlGenericControl();
              StringBuilder html = new StringBuilder();
              html.Append("&lt;script type=\"text/javascript\"&gt;");
              html.Append("$(\"#panelTabs\").tabs({selected: 2});");
              html.Append("&lt;/script&gt;");
              ctl.InnerHtml = html.ToString();
              _panelTabs.Controls.Add(ctl);
  </code></pre>
  
  <p>Another version:</p>
  
  <pre><code>StringBuilder tabsLiteral = new StringBuilder();
              tabsLiteral.Append("&lt;ul&gt;");
              foreach (KeyValuePair&lt;string, Tab&gt; kvp in tabs)
              {
                  string active = "";
                  if (currentTabCaption == kvp.Value.Caption)
                  {
                      //active = " class=\"ui-tabs-selected\"";
                  }
                  tabsLiteral.Append("&lt;li" + active + "&gt;");
                  // Note - the kvp.Value.URI determines what should happen when the Tab is clicked
                  tabsLiteral.Append("&lt;a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\"&gt;" + kvp.Value.Caption + "&lt;/a&gt;");
                  tabsLiteral.Append("&lt;/li&gt;");
              }
              tabsLiteral.Append("&lt;/ul&gt;");
              _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString()));
  
              HtmlGenericControl ctl = new HtmlGenericControl();
              StringBuilder html = new StringBuilder();
              html.Append("&lt;script type=\"text/javascript\"&gt;");
              //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 
              html.Append(@"$(function() {
                  alert('initialising tabs');
                  $(""#panelTabs"").tabs({
                      ajaxOptions: {
                          error: function(xhr, status, index, anchor) {
                              $(anchor.hash).html(""Couldn't load this tab. We'll try to fix this as soon as possible."");
                          }
                      },
                      select: function(event, ui) {
                          getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
                      }
                  });
              });");
              html.Append("$(\"#panelTabs\").tabs({selected: 2});");
              html.Append("&lt;/script&gt;");
              ctl.InnerHtml = html.ToString();
              //_panelTabs.Controls.Add(ctl);
              Page.Controls.Add(ctl);
  </code></pre>