使用 jQuery UI 选项卡，如何在单击选项卡后运行代码？答案

【问题标题】：With jQuery UI tabs, how can I run code after a click on a tab?使用 jQuery UI 选项卡，如何在单击选项卡后运行代码？
【发布时间】：2010-11-14 03:07:24
【问题描述】：

使用jQuery UI tabs，您可以在单击选项卡时使用 select 方法运行代码：

$( ".selector" ).tabs({
   select: function(event, ui) { ... }
});

但是代码是在刚刚单击的选项卡加载之前运行的。加载新选项卡后，我需要运行代码。我怎样才能做到这一点？谢谢阅读。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

API 已更改。这个事件现在是“activate”/“tasbactivate”；见http://api.jqueryui.com/tabs/#event-activate

----- OLD 在下面回答-----------

根据问题，需要的是 tabsshow（而不是 tabsload）事件...显示标签时触发事件。

代码示例：（来自http://jqueryui.com/demos/tabs/）

提供一个回调函数来处理作为初始化选项的显示事件。

$( ".selector" ).tabs({
   show: function(event, ui) { ... }
});

按类型绑定到 show 事件：tabsshow。

$( ".selector" ).bind( "tabsshow", function(event, ui) {
  ...
});

如果您想将焦点设置在控制或类似上，该事件很有用。

【讨论】：

这个事件现在是“activate”/“tasbactivate”；见api.jqueryui.com/tabs/#event-activate
同意这个答案...对于用户的要求更有意义。
我只是讨厌单击活动选项卡时没有事件。它会阻止点击调用，但也不会给您任何事件

【解决方案2】：

$( ".selector" ).tabs({
   load: function(event, ui) { ... }
});

来自http://jqueryui.com/demos/tabs/

【讨论】：

【解决方案3】：

看起来你可以绑定到 tabsload 或 tabsshow：

http://jqueryui.com/demos/tabs/#Events

例子

$('#example').bind('tabsshow', function(event, ui) { ... });

【讨论】：

这个事件现在是“activate”/“tasbactivate”；见api.jqueryui.com/tabs/#event-activate
要清楚，你不会使用 bind() 方法： $( ".selector" ).tabs({ activate: function( event, ui ) { } });

【解决方案4】：

HTML

<div id="tabs">
    <ul>
        <li><a href="#job_information_tab">Job Information</a></li>
    </ul>
    <div id="job_information_tab">
        [content]
    </div>
</div>

$('a[href="#job_information_tab"]').on('click', function() {
   alert("Don't tickle me! I am gonna pee!");
});

【讨论】：