如何在 jquery-ui 1.9 中以编程方式更改选项卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15304027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change tabs programmatically in jquery-ui 1.9?
提问by sonjz
How do you change tabs programmatically with jquery-ui 1.9?
如何使用 jquery-ui 1.9 以编程方式更改选项卡？
NOTE:Posting the answer because it took me more than 4 searches to find the right answer on stackoverflow. It appears in 1.9 the API has changed, in earlier versions, you would use $("#tabs").tabs("select", 2).
注意：发布答案是因为我花了超过 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>
回答by sonjz
The selectmethod is deprecated since 1.9, and was removed in 1.10. Use the activeoption instead.
该select方法自 1.9 起已弃用，并在 1.10中删除。请改用该active选项。
Example (jsfiddlealso provided):
示例（还提供了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>
回答by Muhammad Soliman
Selection according id is very straight forward as Sonjzspecified above ... but selection according to tabId is trickier .. I just want to share it in case anybody needs
根据上面指定的Sonjz，根据 id 进行选择非常简单......但是根据 tabId 进行选择比较棘手......我只是想分享它，以防有人需要
var index = $('#tabs a[href="#tab_id"]').parent().index();
$("#tabs").tabs("option", "active", index);
回答by Amol Udage
Try this
尝试这个
$('#tabs a[href="#tabs-2"]').tab('show')
Here #tabs-2means the tab you want to switch.
这里#tabs-2表示您要切换的选项卡。
Thanks.
谢谢。
回答by AreaEuro
If you add an id to the tab list elements, you can simulate a click using jQuery click() method.
如果向选项卡列表元素添加 id，则可以使用 jQuery click() 方法模拟单击。
For example the following will activate tab2 when clicking the button outside of the tabs:
例如，当单击选项卡外的按钮时，以下将激活 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>
