如何处理 jquery ui 的选项卡小部件的选择事件？答案

【问题标题】：How to handle select event of tab widget of jquery ui?如何处理 jquery ui 的选项卡小部件的选择事件？
【发布时间】：2013-04-10 16:29:47
【问题描述】：

我在我的网页中使用 jquery ui 的选项卡小部件初始化没问题。但想捕获选项卡的 on_selected 事件以执行其他操作。我关注了 jquery 的文档，但它不起作用。 doc!

我试过了

    $( "#editor-tabs" ).tabs();
    $("#editor-tabs").bind("tabsshow",function(event,ui){
            alert(ui.index);
    });

和

$( "#editor-tabs" ).tabs({
    select: function(event,ui){alert(ui.index);}
});

在回调函数中设置断点，它们不会被命中。

【问题讨论】：

对不起，我已经编辑了问题

标签： jquery jquery-ui tabs

【解决方案1】：

如果你使用 jquery ui 1.10.* ，下面的代码是正确的。我错误地使用了doc。仅适用于 1.8

如果您遇到类似问题，最好检查一下您的版本号。

        $("#editor-tabs" ).tabs({                                                                  
            activate:function(event,ui){                                                       
                            alert(ui.index);                                                   
                    }                                                                          
         });

【讨论】：

【解决方案2】：

查看我对这个问题的类似回答：

https://stackoverflow.com/a/17509685/763629

注意 jQuery UI 1.10.x+ 使用这个：

ui.newTab.index()

【讨论】：

【解决方案3】：

您介意发布一个代码示例吗？根据http://api.jqueryui.com/tabs/ 没有“on_selected”事件，而是activate、beforeActivate、beforeLoad、create和load。

还有你想达到什么目标？

可以参考这个：jQuery - trapping tab select event

 $('#tabs, #fragment-1').tabs({
  select: function(event, ui){
    // Do stuff here
  }
});

【讨论】：

链接中的最后一个答案有效。 api改变了。关键字是“激活”而不是“选择”。