防止引导选项卡的show事件

Question

我正在使用bootstrap nav-tabs ，当一个选项卡的show事件被触发时，我会进行一次if测试，如果失败了，我会调用e.preventDefault(); 如下：

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    if(test){
        e.preventDefault();
        return false;
    }
});

在这种情况下有效。

在另一种情况下，我调用ajax函数，它将基于此结果返回我一个结果，我希望防止show事件的默认行为，如下所示：

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    checkPageLayoutsAreSelected();
    window.getLayoutAreSelectedResult = function(xhr, status, args) {
        if(args.returnedValue === false){
            e.preventDefault();
            console.log('Hello.');
            return false;
        }
    };
}); 

checkPageLayoutsAreSelected（）函数将执行ajax调用，如果成功，它将调用window.getLayoutAreSelectedResult()函数。 请注意，在这种情况下，将打印Hello记录的消息。

这里的问题是即使我调用了e.preventDefault();选项卡也总是显示e.preventDefault(); 。

我认为show事件已经在ajax调用完成之前触发。

我该如何解决？

我认为还有另一种方法可以完成此操作，即记住最近选择的选项卡，而不是调用e.preventDefault()而是在当前选择的选项卡之前显示最新选择的选项卡，因此：

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

    //TODO : get the latest selected tab before this current selected tab

    checkPageLayoutsAreSelected();
    window.getLayoutAreSelectedResult = function(xhr, status, args) {
        if(args.returnedValue === false){
            var tab = $(".tabs").find("[data-target='"+latestSelectedTab+"']")[0];
            $(tab).tab('show');
        }
    };
});

但是我不知道如何才能在当前选择的选项卡之前获取最新的选择的选项卡。

Answer 1

原则上，我建议避免将页面导航与ajax调用链接在一起，因为这将在您的UI中添加一个“打cup”，这意味着该选项卡将等到调用完成后再执行您想做的任何事情。

我建议您加载确定选项卡内容是否应在页面加载而不是在单击标签时显示的值。 您可以将这些值存储在隐藏的输入或数组上，然后进行检查，这样您的浏览体验就可以了。