Как изменить вкладки программно в jquery-ui 1.9?

Как вы программно изменяете вкладки с помощью jquery-ui 1.9?

ПРИМЕЧАНИЕ. Проводка ответа, потому что для поиска правильного ответа на stackoverflow мне потребовалось больше 4 запросов. В версии 1.9 API изменился, в более ранних версиях вы использовали бы $("#tabs").tabs("select", 2).

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

      // assume you want to change to the 3rd tab after 3 seconds
      setTimeout(function() {
         // ???
      }, 3000);
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>

    <div id="tabs-1"><p>Container 1</p></div>
    <div id="tabs-2"><p>Container 2</p></div>
    <div id="tabs-3"><p>Container 3</p></div>
</div>

Ответы

Ответ 1

Метод select устарел с версии 1.9 и был удален в 1.10. Вместо этого используйте опцию active.

Пример (jsfiddle также предоставлен):

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

      // assume you want to change to the 3rd tab after 3 seconds
      setTimeout(function() {
          $("#tabs").tabs("option", "active", 2);
      }, 3000);
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>

    <div id="tabs-1"><p>Container 1</p></div>
    <div id="tabs-2"><p>Container 2</p></div>
    <div id="tabs-3"><p>Container 3</p></div>
</div>

Ответ 2

Выбор по id очень прямолинейный как Sonjz, указанный выше... но выбор в соответствии с tabId более сложный. Я просто хочу поделиться им, если кому-то понадобится

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

Ответ 3

Попробуйте это

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

Здесь #tabs-2 означает вкладку, которую вы хотите переключить.

Спасибо.