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();，也会始终显示该标签。

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

我该如何解决这个问题？

我认为还有另一种方法可以完成此操作，即记住最新选择的选项卡，然后调用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调用相关联，因为这会增加＆＃34;打嗝＆＃34;在你的用户界面中，这意味着标签会等到通话完成后再做你想做的任何事情。

我建议您加载值，以确定标签内容是否应在页面加载时显示，而不是在标签点击上显示。您可以将这些值存储在隐藏的输入或阵列上，然后检查它，您的浏览体验就可以了。

阻止引导选项卡的show事件

1 个答案: