带有 Bootstrap 导航选项卡的 SweetAlert

Question

我有一个带有 4 个链接（申请人、覆盖范围、位置、高级）的引导导航选项卡。我在 Coverages 上有一个 jquery 点击事件来验证申请人数据。如果失败，则显示 sweetalert 并停留在“申请人”选项卡上：

$('#CoveragesTab').off('click').on('click', function (event) {
    SaveApplicantTabData(function (retVal) {
        if ("success" == retVal.status) {
        }
        else if ("failed" == retVal.status) {
            event.stopImmediatePropagation();
            swal(retVal.message, "Applicant Error", "error");
            //alerta(retVal.message);
            return false;
        }
        else if ("error" == retVal.status) {
            event.stopImmediatePropagation();
            alert(retVal.message);
            return false;
        }
    });
});

从功能上讲，这可以完美运行，但 Coverages 链接看起来仍然具有焦点 - 选项卡的整个正方形突出显示，就像将鼠标悬停在选项卡上一样。它没有焦点。我检查了开发人员工具，活动链接以及其他值都是正确的。

如何从标签中移除焦点外观？

谢谢。

Answer 1

经过多次反复试验，我终于弄明白了。我必须同时使用 event.stopImmediatePropogation 和 .blur()。

$('#CoveragesTab').off('click').on('click', function (event) {
    SaveApplicantTabData(function (retVal) {
        if ("success" == retVal.status) {
        }
        else if ("failed" == retVal.status) {
            event.stopImmediatePropagation();
            $('#CoveragesTab').blur();
            swal(retVal.message, "Applicant Error", "error");
            return false;
        }
        else if ("error" == retVal.status) {
            event.stopImmediatePropagation();
            alert(retVal.message);
            return false;
        }
    });
});

唯一的一点是，当您使用 stoppropogation 时，它会将 href 作为 url 的一部分：

http://localhost:3858/CreateQuote/EditQuote/1#coverages-tab

所以我必须从 url 中删除报价 ID。

有谁知道如何防止这种情况发生？

谢谢。

Answer 2

当验证失败时，您可以将blur() 方法添加到您的Coverages 导航选项卡链接：

$('#CoveragesTab').off('click').on('click', function (event) {
    SaveApplicantTabData(function (retVal) {
        if ("success" == retVal.status) {
        }
        else if ("failed" == retVal.status) {
            event.stopImmediatePropagation();
            swal(retVal.message, "Applicant Error", "error");
            //alerta(retVal.message);
            $(this).blur();
            return false;
        }
        else if ("error" == retVal.status) {
            event.stopImmediatePropagation();
            alert(retVal.message);
            return false;
        }
    });
});