如何在 jQuery Ui 中设置活动标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21860658/
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 Set Active Tab in jQuery Ui
提问by Behseini
Can you please let me know how I can set the active tab in jquery ui with a button click out of the tabs?
您能否告诉我如何通过单击选项卡中的按钮在 jquery ui 中设置活动选项卡？
I have a button like:
我有一个按钮，如：
<input id="action" type="submit" value="Go to Action">
and here is the code,
这是代码，
<script>
$(function() {
$( "#tabs" ).tabs();
$( "#action" ).on("click", function(){});
});
<div id="tabs">
<ul>
<li><a href="#tabs-1">Description</a></li>
<li><a href="#tabs-2">Action</a></li>
<li><a href="#tabs-3">Resources</a></li>
<li><a href="#tabs-4">Settings</a></li>
</ul>
<div id="tabs-1">
<p>Description content</p>
</div>
<div id="tabs-2">
<p>Action content</p>
</div>
<div id="tabs-3">
<p>Resources content</p>
</div>
<div id="tabs-4">
<p>Settings </p>
</div>
</div>
回答by Daniel Esponda
Inside your function for the click action use
在用于单击操作的函数中
$( "#tabs" ).tabs({ active: # });
Where # is replaced by the tab index you want to select.
其中 # 替换为您要选择的选项卡索引。
Edit: change from selected to active, selected is deprecated
编辑：从选定更改为活动，选定已弃用
回答by Denys Wessels
Simple jQuery solution - find the <a>element where href="x"and click it:
简单的 jQuery 解决方案 - 在<a>其中找到元素href="x"并单击它：
$('a[href="#tabs-2"]').click();
回答by Mike Moon
Just to clarify in complete detail. This is what works with the current version of jQuery Ui
只是为了完全详细地澄清。这适用于当前版本的 jQuery Ui
$( "#tabs" ).tabs( "option", "active", # );
where # is the index of the tab you want to make active.
其中 # 是要激活的选项卡的索引。
回答by Pa?out
Inside your function for the click action use
在用于单击操作的函数中
$( "#tabs" ).tabs({ active: # });
Where #is replaced by the tab index you want to select.
Where#由您要选择的选项卡索引替换。
回答by Jaylen
I know this is an old question. But I think the way to change the selected tab have changed slight
我知道这是一个老问题。但我认为更改所选标签的方式略有变化
The way to change the active tab now is by giving active the index of the tab. Note the index starts at 0 not 1. To make the secondtab active you will use the the index 1.
现在更改活动选项卡的方法是提供活动选项卡的索引。请注意，索引从 0 开始，而不是 1。要使第二个选项卡处于活动状态，您将使用索引 1。
//this will select your first tab
$( "#tabs" ).tabs({ active: 0 });
回答by Carl
If you want to set the active tab by ID instead of index, you can also use the following:
如果要按 ID 而不是索引设置活动选项卡，还可以使用以下命令：
$('#tabs').tabs({ active: $('#tabs ul').index($('#tab-101')) });
回答by Java_User
You can use this:
你可以使用这个：
$(document).ready(function() {
$("#tabs").tabs();
$('#action').click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
});
Also consider changing the input type as buttoninstead of submitunless you want to submit the page.
还可以考虑更改输入类型 asbutton而不是，submit除非您想提交页面。
回答by Cristhian Ortega
HTML: First you have o save the post tab index
HTML：首先你要保存帖子标签索引
<input type="hidden" name="hddIndiceTab" id="hddIndiceTab" value="<?php echo filter_input(INPUT_POST, 'hddIndiceTab');?>"/>
JS
JS
$( "#tabs" ).tabs({
active: $('#hddIndiceTab').val(), // activate the last tab selected
activate: function( event, ui ) {
$('#hddIndiceTab').val($( "#tabs" ).tabs( "option", "active" )); // save the tab index in the input hidden element
}
});
回答by Edwin Thomas
just trigger a click, it's work for me:
只需触发一次点击，它对我有用：
$("#tabX").trigger("click");
