Javascript 如何在jQueryUI1.9中以编程方式更改选项卡？

如何使用jQueryUI1.9以编程方式更改选项卡

注意：发布答案，因为我花了4次以上的搜索才在stackoverflow上找到正确答案。API在1.9中出现了变化，在早期版本中，您将使用

$（“#tabs”）.tabs（“选择”，2）

$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
//假设您想在3秒钟后切换到第三个选项卡
setTimeout（函数（）{
// ???
}, 3000);
});





容器1

容器2

容器3

选择方法是，并且是。改用

激活的

选项

示例（还提供）：

$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
//假设您想在3秒钟后切换到第三个选项卡
setTimeout（函数（）{
$（“选项卡”）。选项卡（“选项”、“活动”，2）；
}, 3000);
});





容器1

容器2

容器3

如上所述，根据id进行选择非常简单。。。但根据塔比德的选择更为棘手。。我只是想分享一下，以防有人需要

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

试试这个

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

---

这里，tabs-2是指要切换的选项卡。

如果向选项卡列表元素添加id，可以使用jQuery click（）方法模拟单击

例如，单击选项卡外的按钮时，以下内容将激活选项卡2：

<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>

容器1

容器2

容器3

单击以激活选项卡2
$（“#制表符”）.tabs（）；
$（'#btn'）。单击（函数（）{$（'#th2'）。单击（）；

我通过执行

$（'#tabs a[href=“#tab_id”]'）[0]使其正常工作。单击（）即使在目标选项卡之前插入新选项卡，此解决方案也会起作用，而接受的答案将中断。我知道我在重复我自己，但即使在目标选项卡之前插入新选项卡，此解决方案也会起作用，而接受的答案将中断。这在jquey UI 1.11中不起作用，必须在锚元素上触发单击事件。