How To Change Tabs Programmatically In Jquery-ui 1.9?

How do you change tabs programmatically with jquery-ui 1.9? NOTE: Posting the answer because it took me more than 4 searches to find the right answer on stackoverflow. It appears

Solution 1:

The select method is deprecated since 1.9, and was removed in 1.10. Use the active option instead.

Example (jsfiddle also provided):

<script>
    $(document).ready(function() {
      $("#tabs").tabs();

      // assume you want to change to the 3rd tab after 3 secondssetTimeout(function() {
          $("#tabs").tabs("option", "active", 2);
      }, 3000);
    });
</script><divid="tabs"><ul><li><ahref="#tabs-1">Tab 1</a></li><li><ahref="#tabs-2">Tab 2</a></li><li><ahref="#tabs-3">Tab 3</a></li></ul><divid="tabs-1"><p>Container 1</p></div><divid="tabs-2"><p>Container 2</p></div><divid="tabs-3"><p>Container 3</p></div></div>

Solution 2:

Selection according id is very straight forward as Sonjz specified above ... but selection according to tabId is trickier .. I just want to share it in case anybody needs

var index = $('#tabs a[href="#tab_id"]').parent().index();
$("#tabs").tabs("option", "active", index);

Solution 3:

Try this

$('#tabs a[href="#tabs-2"]').tab('show')

Here #tabs-2 means the tab you want to switch.

Solution 4:

If you add an id to the tab list elements, you can simulate a click using jQuery click() method.

For example the following will activate tab2 when clicking the button outside of the tabs:

<divid="tabs"><ul><li><ahref="#tabs-1"id="th1">Tab 1</a></li><li><ahref="#tabs-2"id="th2">Tab 2</a></li><li><ahref="#tabs-3"id="th3">Tab 3</a></li></ul><divid="tabs-1"><p>Container 1</p></div><divid="tabs-2"><p>Container 2</p></div><divid="tabs-3"><p>Container 3</p></div></div><buttonid="btn">Click to activate Tab 2</button><script>
$("#tabs").tabs();
$('#btn').click(function() {$('#th2').click()});
</script>