如何以编程方式切换到新的 jQuery UI 选项卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7244549/
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 do I switch to a new jQuery UI tab programmatically?
提问by Faiyet
I am building a "check-out" like interaction with jQuery UI tabs. This means that the click of a button on the first tab will deactivate the first tab and move to the next. I have been combing through the posts on Stack Overflow but nothing I try seems to work. I am using jQuery UI 1.8, here is the code:
我正在构建一个“签出”，比如与 jQuery UI 选项卡的交互。这意味着单击第一个选项卡上的按钮将停用第一个选项卡并移至下一个选项卡。我一直在梳理 Stack Overflow 上的帖子，但我尝试的任何内容似乎都不起作用。我正在使用 jQuery UI 1.8，这是代码：
$(document).ready(function() {
var $tabs = $('#tabs').tabs({ selected: 0 });
$tabs.tabs('option', 'selected', 0);
$("#tabs").tabs({disabled: [1,2]});
$("#addstudent").click(function(){
$tabs.tabs('option', 'selected', 1);
$("#tabs").tabs({disabled: [0,2]});
});
$("#confirm").click(function(){
$tabs.tabs('option', 'selected', 2);
$("#tabs").tabs({disabled: [0,1]});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li><a href="#fragment-1">Student Information</a></li>
<li><a href="#fragment-2">Confirmation</a></li>
<li><a href="#fragment-3">Invoice</a></li>
</ul>
<div id="fragment-1">
<button id="addstudent" >Add Student</button>
</div>
<div id="fragment-2">
<button id="confirm" >Confirm</button>
</div>
<div id="fragment-3">
tab 3, index 2
</div>
</div>When I click the buttons, the next tab becomes unlocked (in that it is selectable) but it does not disable the tab at index 0 and switch to the tab at index 1. Also, the corresponding panel does not show.
当我单击按钮时，下一个选项卡将解锁（因为它是可选的）但它不会禁用索引 0 处的选项卡并切换到索引 1 处的选项卡。此外，相应的面板也不会显示。
采纳答案by Richard Dalton
Try changing your code to this:
尝试将您的代码更改为：
var $tabs = $('#tabs').tabs({ selected: 0, disabled: [1,2] });
$("#addstudent").click(function(){
$tabs.tabs('enable', 1).tabs('select', 1).tabs('disable', 0);
});
$("#confirm").click(function(){
$tabs.tabs('enable', 2).tabs('select', 2).tabs('disable', 1);
});
回答by Aaron Sherman
For jQuery UI 1.9+, the select method has been deprecatedin the API. In 1.9+, you need to use optionand active, instead.
对于 jQuery UI 1.9+，API 中的select 方法已被弃用。在 1.9+ 中，您需要使用optionandactive代替。
From the documentation:
从文档：
Old API:
// Activate the third tab (in a zero-based index) $( "#tabs" ).tabs( "select", 2 );New API:
// Activate the third tab (in a zero-based index) $( "#tabs" ).tabs( "option", "active", 2 );
旧 API：
// Activate the third tab (in a zero-based index) $( "#tabs" ).tabs( "select", 2 );新 API：
// Activate the third tab (in a zero-based index) $( "#tabs" ).tabs( "option", "active", 2 );
回答by Mahesh Vemuri
@Aaron Sherman already answered your question. Here is the detailed step.
@Aaron Sherman 已经回答了您的问题。这是详细步骤。
Here is JS part of the code:
这是代码的JS部分：
$(document) .ready(function() {
$("#tabs").tabs();
$(".btnNext").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
});
$(".btnPrev").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
});
});
Here are the "a href" tags to be added in your tabs div
这是要添加到标签 div 中的“a href”标签
Example:
例子：
<div id="tabs-1">
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-2">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-3">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
</div>
回答by Luca Detomi
I modified solution of @Mahesh Vemuriadding possibility to disable steps following the first and then enable them after clicking "NEXT" button:
我修改了@Mahesh Vemuri 的解决方案，添加了禁用第一个步骤之后的可能性，然后在单击“下一步”按钮后启用它们：
JScode:
代码：
$(document) .ready(function() {
$("#tabs").tabs();
$("#tabs").tabs( "option", "disabled", [ 1, 2 ] );
$(".btnNext").click(function () {
$("#tabs").tabs( "enable", $("#tabs").tabs('option', 'active')+1 );
$("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
});
$(".btnPrev").click(function () {
$("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
});
});
The HTML is the same.
HTML 是相同的。
P.S.: Note that with this code, clicking NEXT button will enable next tab (previously disabled) but clicking PREV button will not disable current tab, in order to allow user to go backward and forward into a sequential flow until next disabled tab.
PS：请注意，使用此代码，单击 NEXT 按钮将启用下一个选项卡（以前禁用），但单击 PREV 按钮不会禁用当前选项卡，以允许用户向后和向前进入顺序流，直到下一个禁用选项卡。
Hopefully, if Tabs contain 3 steps of a form, action of NEXT button could be fired only if a JS Form Validationwill have success.
希望如果选项卡包含表单的 3 个步骤，则只有在JS 表单验证成功时才能触发 NEXT 按钮的操作。
回答by Milind Morey
$(function() {
$( "#tabs" ).tabs({ activate: function(event ,ui){
//console.log(event);
//alert( ui.newTab.index());
//alert( ui.newTab.attr('li',"innerHTML")[0].getElementsByTagName("a")[0].innerHTML);
alert( ui.newTab[0].getElementsByTagName("a")[0].innerHTML);
//alert( this.text);
} });
});
