如何在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>

- sonjz

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>

- sonjz

---

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

Answer 2

根据id进行选择非常直接，就像Sonjz上面指定的那样...但是根据tabId进行选择则更为棘手。我只想分享一下以防有人需要。

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

- Muhammad Soliman

---

我通过执行 $('#tabs a[href="#tab_id"]')[0].click(); 使其正常工作。 - Alexandre Pereira Nunes

这个解决方案即使在目标选项卡之前插入新的选项卡也能正常工作，而被接受的答案则会出现问题。 - Dieter Donnert

Answer 3

试试这个

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

这里的#tabs-2表示您想要切换的选项卡。

- Amol Udage

---

我知道我在重复，但是这个解决方案即使在目标选项卡之前插入新的选项卡也可以工作，而被接受的答案会出错。 - Dieter Donnert

Answer 4

如果您给选项卡列表元素添加一个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>

- AreaEuro