带有 Bootstrap 个导航标签的 SweetAlert

Question

我有一个 bootstrap 导航选项卡，其中包含 4 link 个（申请人、承保范围、地点、高级）。我在 Coverages 上有一个 jquery click 事件来验证申请人数据。如果失败，显示 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 link 看起来仍然有焦点 - 选项卡的整个正方形都突出显示，就像悬停在选项卡上一样。它没有重点。我检查了开发人员工具，活动 link 和其他值一样正确。

如何从选项卡中删除焦点外观？

谢谢。

Answer 1

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

$('#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;
        }
    });
});

Answer 2

经过反复试验，我终于想通了。我必须同时使用 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;
        }
    });
});

唯一的问题是，当您使用停止传播时，它会将 href 作为 url:

的一部分

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

所以我必须从 url 中删除引用 ID。

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

谢谢。

带有 Bootstrap 个导航标签的 SweetAlert

SweetAlert with Bootstrap nav tabs

jquery

tabs

twitter-bootstrap

sweetalert