title: Change tab programmatically on JQuery Mobile
body: <p>I have a navbar (bellow) and I would like to change tabs using Javascript, found no documentation to help me and a lot of broken code online, I would appreciate some help here.</p>
  
  <p>Test case: the tab has page-1 initially selected, I would like to change to page-2 using javascript.</p>
  
  <pre><code>&lt;div data-role="tabs" id="tabs"&gt;
  &lt;div data-role="navbar" id="navbar"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#page-1" data-ajax="false" class="ui-btn-active"&gt;1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#page-2" data-ajax="false"&gt;2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#page-3" data-ajax="false"&gt;3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#page-4" data-ajax="false"&gt;4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#page-5" data-ajax="false"&gt;5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Tested Code:</strong></p>
  
  <pre><code>var index = $('#tabs a[href="#page-2"]').parent().index();
  $('#tabs').tabs('select', index);
  </code></pre>
  
  <p>Throws:</p>
  
  <pre><code>Error: no such method 'select' for tabs widget instance
  </code></pre>
  
  <p><strong>After the solution I came up with these functions:</strong></p>
  
  <pre><code>function changeNavPagePrevious(tabControl) {
      if ($("#" + tabControl + " .ui-tabs-active").prev().length &gt; 0) {
          if ($("#" + tabControl + " .ui-tabs-active").prev().children().length &gt; 0) {
          changeNavPage(tabControl, $("#" + tabControl + " .ui-tabs-active").prev().children().eq(0).attr("href").replace("#", ""));
          }
      }
  }
  
  function changeNavPageNext(tabControl) {
      if ($("#" + tabControl + " .ui-tabs-active").next().length &gt; 0) {
          if ($("#" + tabControl + " .ui-tabs-active").next().children().length &gt; 0) {
              changeNavPage(tabControl, $("#" + tabControl + " .ui-tabs-active").next().children().eq(0).attr("href").replace("#", ""));
          }
      }
  }
  
  function changeNavPage(tabControl, newPage)
  {
      $("#" + tabControl + " .ui-btn-active").eq(0).removeClass("ui-btn-active").removeClass('ui-tabs-active').removeClass("ui-state-active");
      $('#tabs a[href="#' + newPage + '"]').addClass('ui-btn-active');
  
      var index = $('#' + tabControl + ' a[href="#' + newPage + '"]').parent().index();
      $("#" + tabControl).tabs("option", "active", index);
  </code></pre>
  
  <p>}</p>