JQuery UI Tabs: how to change selected tab from callback, supplied to 'select' event?
I use JQuery UI tabs, and I've attached a callback function to the select event, and I want to change selected tab from within this function:
$('#tabs').tabs({
select: funciton () {
// here I have to change the tab, that have been just selected, to another one
}
});
For example, I have three forms, one under each tab. User have to fill in them in correct order, first, then second, and then the last one. If user fills in the first form, and then clicks on the third tab, I have to redirect him to the second tab programmatically. I've achieved this goal by visually simulating the se开发者_如何学Clection of the second tab, but I think this is not the best solution:
$('#tabs').tabs({
select: funciton (event, ui) {
if (ui.index > 2 && !$('#form2').valid()) {
// here I have to change the tab, that have been just selected, to another one
$('#tabs ul.ui-tabs-nav li').removeClass('ui-state-focus ui-tabs-selected ui-state-active');
$('#tabs ul.ui-tabs-nav a[href="#tab2"]').parent('li').addClass('ui-state-focus ui-tabs-selected ui-state-active');
$('#tabs div.ui-tabs-panel').addClass('ui-tabs-hide');
$('#tabs div#tab2').removeClass('ui-tabs-hide');
}
}
});
I agree with PetersenDidIt, but I guess it is easier to demonstrate it with some code:
var $tabs = $('#tabs').tabs({ disabled: [1, 2] });
$('#buttonToEnableTab2').click(function() {
$tabs.tabs({disabled: [2]});
});
$('#buttonToEnableAllTabs').click(function() {
$tabs.tabs({disabled: false});
});
Example: http://jsfiddle.net/william/ysjVU/2/
You can also have some event to trigger the tab to be disabled again.
Why don't you just disable the other tabs until they finish the form.
Disable all but tab 1 first. Then once they have finished the form in tab 1 enable the second tab and select it for them. Then just repeat this for each of the tabs.
精彩评论