Question

我使用JQuery UI选项卡，并且我已经将一个回调函数附加到select事件，我想从此函数中更改选定的选项卡：

$('#tabs').tabs({
  select: funciton () {
    // here I have to change the tab, that have been just selected, to another one
  }
});

例如，我有三个表单，每个表单下有一个表单。用户必须以正确的顺序填写它们，首先是第二个，然后是最后一个。如果用户填写第一个表单，然后单击第三个选项卡，我必须以编程方式将其重定向到第二个选项卡。我通过直观地模拟第二个选项卡的选择来实现这个目标，但我认为这不是最好的解决方案：

$('#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');
    }
  }
});

Answer 1

为什么不在完成表单之前禁用其他选项卡。

首先禁用除标签1之外的所有内容。然后，一旦他们完成了选项卡1中的表单，启用第二个选项卡并为其选择它。然后只需为每个标签重复此操作。

Answer 2

我同意PetersenDidIt，但我想用一些代码更容易证明它：

var $tabs = $('#tabs').tabs({ disabled: [1, 2] });

$('#buttonToEnableTab2').click(function() {
    $tabs.tabs({disabled: [2]});
});

$('#buttonToEnableAllTabs').click(function() {
    $tabs.tabs({disabled: false});
});

示例：http://jsfiddle.net/william/ysjVU/2/

您还可以使用某些事件来触发选项卡再次禁用。

JQuery UI选项卡：如何从回调中更改选定的选项卡，提供给“选择”事件？

2 个答案: