检测选项卡在jQueryUI下被选中

Question

我正在尝试检测单击jQueryui选项卡组件上的新选项卡的时间。我已经关注了几个指南和博客，但无法围绕这个过程。我有以下内容：

$('#tabs').tabs({
  select: function(event,ui) {
  alert('selected');
  return false;
  },                
}); 

我不知道我错过了什么，但警报从未触发过。我对jQuery的态度不强，所以我可能犯了一个愚蠢的错误，所以任何帮助都会受到赞赏。

谢谢， 克里斯

更新：jsfiddle示例http://jsfiddle.net/T7czp/16/

Answer 1

最新版本使用

$('#tabs').tabs({
  activate: function(event,ui) {
    alert('selected: '+ui.index);
  }
});

Answer 2

你有任何错误吗？在,后跟踪select将在某些浏览器中破坏脚本。

这可以在这个小提琴中看到：http://jsfiddle.net/T7czp/15/

$('#tabs').tabs({
  select: function(event,ui) {
     alert('selected: '+ui.index);
  }
});

Answer 3

您需要将事件绑定到选项卡。

$("#tabs").bind("tabsselect", function(e, tab) {
  alert("The tab at index " + tab.index + " was selected");
});

Answer 4

自上次接受答案以来，jquery UI似乎略有改变。

teh activate function中定义的ui参数现在是一个与此类似的对象：

对象{oldTab = {...}，oldPanel = {...}，newTab = {...}，更多...}

索引方法位于其中。所以更新的访问方法是：

$('#tabs').tabs({
  activate: function(event,ui) {
    alert('selected: '+ui.newTab.index());
  }
});

Answer 5

@Kristofer

您的代码是正确的。

为了选择标签，您必须删除的唯一内容是以下行：

return false;

因为根据Tabs component documentation：

  

请注意，如果tabsselect事件的处理程序返回false，则单击的选项卡将不会被选中（例如，如果切换到下一个选项卡需要表单验证，则很有用）。

（“tabselect”事件对应于“select”处理程序）