使用 tabsactivate 检测标签 - jQuery UI

Question

我正在尝试将事件侦听器绑定到 jQuery

的选项卡激活事件

$( ".selector" ).on( "tabsactivate", function( event, ui ) {} );

我无法弄清楚如何根据活动选项卡使上述功能起作用。我可以通过将点击事件绑定到选项卡来实现，但是当我使用箭头键时它不起作用。

这是它的fiddle，

$("#tabs").tabs({
    activate: function (event, ui) {
        var active = $('#tabs').tabs('option', 'active');
        console.log("Active .."+active)
    }
}
);

$( ".contentTab" ).on( "tabsactivate", tabEnabled);

function tabEnabled(){
console.log("here...")
}

目的是在选项卡处于活动状态时触发功能

请告诉我遗漏了什么。

Answer 1

您可以使用自定义事件：

var tabsClicked = []; // keep track of clicked tab indexes

activate: function (event, ui) {
    …
    // Only fire custom event the first time tab is active
    if ($.inArray(active, tabsClicked) === -1) {
      tabsClicked.push(active);        
      $(document).trigger("custom-event", [{tab_index : active}]);          
    }
}

$(document).on("custom-event", customEventHandler);

function customEventHandler(event, data) {
  console.log("Tab: " + (++data.tab_index) + " was clicked");;
}

http://jsfiddle.net/CnEUh/3146/

使用 tabsactivate 检测标签 - jQuery UI

Detecting Tabs using tabsactivate - jQuery UI

javascript

jquery

jquery-ui-tabs