Question

我有一个带有4个链接的bootstrap导航选项卡（申请人，Coverages，Locations，Premium）。我在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

您可以在验证失效时将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;
        }
    });
});

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;
        }
    });
});

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

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

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

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

谢谢。

带引导导航标签的SweetAlert

2 个答案: