阻止引导选项卡的显示事件

Posted 2023-05-08

【中文标题】阻止引导选项卡的显示事件

【英文标题】：Prevent the show event for bootstrap tabs

【发布时间】：2017-07-14 01:14:32

【问题描述】：

我正在使用引导程序nav-tabs，当触发选项卡的显示事件时，我会进行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();，该选项卡也始终显示。

我认为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');
        
    ;
);

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

【参考方案1】：

原则上，我建议避免将页面导航与 ajax 调用链接，因为这会在您的 UI 中添加“打嗝”，这意味着选项卡将等到调用完成，然后执行您希望它执行的任何操作。

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

【讨论】：

不幸的是，我不能这样做，因为在页面加载时无法调用 checkPageLayoutsAreSelected

如果你想这样做“我认为还有另一种方法可以完成这个，就是记住最近选择的选项卡，然后我们显示最新选择的而不是调用 e.preventDefault()当前选定选项卡之前的选项卡，因此如下：“您可以声明一个变量，例如var selectedTab 然后在选项卡显示为 `$('a[data-toggle="tab"]').on('show.bs.tab', function (e) if(args.returnedValue === false) $(selectedTab).tab('show'); selectedTab = selectedTab = $(e.target).attr("href"); );