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

Question

如何使用jquery-ui 1.9以编程方式更改选项卡？

注意:发布答案是因为我花了4次以上的搜索才能在stackoverflow上找到正确的答案.它出现在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方法自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>

Answer 2

根据id 指定的选择是非常直接的,正如Sonjz在上面指出的那样...但根据tabId的选择比较棘手......我只是想分享它以防任何人需要

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

Answer 3

尝试这个

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

这#tabs-2表示您要切换的标签。

谢谢。