[英]How to change tabs programmatically in jquery-ui 1.9?
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.注意:发布答案是因为我花了超过 4 次搜索才在 stackoverflow 上找到正确答案。 It appears in 1.9 the API has changed, in earlier versions, you would use
$("#tabs").tabs("select", 2)
.它出现在 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>
The select
method is deprecated since 1.9 , and was removed in 1.10 . select
方法自 1.9 起已弃用,并在 1.10中删除。 Use the active
option instead.请改用
active
选项。
Example ( jsfiddle also 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>
Selection according id is very straight forward as Sonjz specified 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);
Try this试试这个
$('#tabs a[href="#tabs-2"]').tab('show')
Here #tabs-2
means the tab you want to switch.这里
#tabs-2
表示您要切换的选项卡。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.