jQuery UI选项卡禁用选项卡导航。

Question

我尝试使用以下方法禁用选项卡导航：

var $tabs = $("#tabs").tabs({
    select: function(event, ui) { return false; }
});

然而，这也会禁用我用于导航的流链接：

$('input.nexttab').click(function() {
    var tab_num = $tabs.tabs('option', 'selected');
    // error check this tab before proceeding
    if ( check_tab(tab_num) ) {
        $tabs.tabs('select', tab_num + 1 );
    }
});

理想情况下，我希望禁用当前选项卡右侧的选项卡导航，并确保我的“<<上一个”和“下一个>>”选项卡导航按钮始终可用。

有什么建议吗？

- cliveholloway

Answer 1

您尝试过将事件选项设置为不太可能被触发的内容吗？

例如：

$('#tabs').tabs({ event: 'change' });

或者

$('#tabs').tabs({ event: '' }); //probably better

- Jason Berry

---

+1将其设置为onchange可以正常工作，但为空则不行。很可能选项卡控件也不会触发onchange事件。 - jfrobishow

Answer 2

您应该在第一个闭包中存储一个标志，在传递给$(document).ready的函数中，当单击下一个/上一个按钮时将其设置为true，并在选项卡被显示时设置回false，通过这样做，您只能使用按钮来更改选项卡。

请查看此工作示例和以下代码片段：

$(document).ready(function(){ 
  var allowTabChange = false; 
  var $myTabs = $("#tabs"); 

  $myTabs.tabs({ 
                    select: function(event, ui) { return allowTabChange; }, 
                    show: function(event, ui) { allowTabChange = false; }, 
               }); 

  $('#nextButton').click(function(){offsetTab(1);}); 
  $('#prevButton').click(function(){offsetTab(-1);}); 

  // Helper functions

  function offsetTab(offset){ 
    var tab_num = $myTabs.tabs('option', 'selected'); 
    var nextTab = tab_num + offset; 

    if ( check_tab(nextTab) ) { 
      allowTabChange = true; 
      $myTabs.tabs('select', nextTab); 
    } 
  }

  function check_tab(tab_num){        
    return tab_num >= 0 && tab_num < $myTabs.tabs('length'); 
  } 
});

- Christian C. Salvadó

---

嗯，看起来有点混乱 - 我希望有一个简单的一行代码可以轻松地添加/删除选项卡的事件处理程序。只要上一页/下一页链接正常工作（以简化逻辑），我可以接受所有选项卡都被禁用。在 .ui-tabs-nav 类元素上使用选择器并删除点击事件？那会起作用吗？ - cliveholloway