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

【问题标题】：How to change tabs programmatically in jquery-ui 1.9?如何在 jquery-ui 1.9 中以编程方式更改选项卡？
【发布时间】：2013-03-08 21:57:00
【问题描述】：

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

【问题讨论】：

标签： javascript jquery jquery-ui tabs

【解决方案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>

【讨论】：

这在 jquey UI 1.11 中不起作用，必须在锚元素上触发点击事件。

【解决方案2】：

根据 id 进行选择非常简单，正如上面指定的 Sonjz...但是根据 tabId 进行选择比较棘手.. 我只是想分享它以防万一有人需要

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

【讨论】：

我通过$('#tabs a[href="#tab_id"]')[0].click();得到它的工作
即使您在目标选项卡之前插入新选项卡，此解决方案也可以工作，而接受的答案会中断。

【解决方案3】：

试试这个

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

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

【讨论】：

我知道我在重复自己，但即使您在目标选项卡之前插入新选项卡，此解决方案也可以工作，而接受的答案会中断。

【解决方案4】：

如果给tab列表元素添加id，可以使用jQuery click()方法模拟点击。

例如，当单击选项卡外的按钮时，以下将激活 tab2：

<div id="tabs">
  <ul>
    <li><a href="#tabs-1" id="th1">Tab 1</a></li>
    <li><a href="#tabs-2" id="th2">Tab 2</a></li>
    <li><a href="#tabs-3" id="th3">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>
<button id="btn">Click to activate Tab 2</button>
<script>
$("#tabs").tabs();
$('#btn').click(function() {$('#th2').click()});
</script>

【讨论】：