javascript - 如何在 jquery-ui 1.9 中以编程方式更改选项卡？

Question

如何使用 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>

Answer 1

select 方法是 deprecated since 1.9 ，并且是 removed in 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>