jQuery UI Tabs选择功能不起作用

Question

我有以下jquery用于在我的网站上创建标签（包装在文档就绪功能中）：

$('#understanding-water-management').tabs({
    select: function(event, ui) {
        alert('hi');
    }
});

但是，在我的网站上，选项卡更改未启用选择功能。 我创建了一个小提琴，但是它能按我期望的那样工作（它在标签更改时发出警报）。

这两个站点之间的唯一区别是，在我自己的网站上，我使用的是jQuery UI的较轻版本，其中我仅下载了Core，Widget（来自UI Core）和Tabs（来自Widget）选项。 我还需要下载其他选项才能使上面的select功能正常工作-我不想使用完整的jQuery UI，因为我只需要使用选项卡即可，因此希望使我的js文件尽可能少

Answer 1

尝试将代码包装在DOM ready处理程序$(function() {...}); 确保在执行jQuery代码之前正确加载所有DOM元素：

$(function() {
    $('#understanding-water-management').tabs({
        select: function(event, ui) {
            alert('hi');
        }
    });
});

您的jsFiddle有效，是因为当您包含jQuery时，默认情况下它们已经为您完成了上述工作。

Answer 2

jQuery UI 1.10将select更改为beforeActivate （如果您希望在选择选项卡之前触发该功能）或activate （如果您希望在选择选项卡之后触发该功能）

尝试

$('#understanding-water-management').tabs({
    beforeActivate: function(event, ui) {
        alert('hi');
    }
});