在Bootstrap中的nav-tab外部单击时，如何删除活动的nav-tab？

在Bootstrap中的页面，通常会使用nav-tab来展示不同内容的切换。然而，有时候我们需要在点击页面其他区域时，自动删除当前选中的nav-tab，以提高用户体验。

下面介绍一种实现的方法，使用jQuery实现。

实现步骤

1. 首先，我们需要给nav-tab的父元素绑定点击事件，以便在该区域外单击时，能够删除当前选中的nav-tab。

$('body').on('click', function (e) {
    if (!$(e.target).closest('#nav-tab').length) {
        // 删除当前选中的nav-tab
    }
});

2. 在该事件中，我们需要判断当前点击的区域是否在nav-tab内部。如果是，就不做处理；否则，删除当前选中的nav-tab。可以使用jQuery的closest方法判断一个元素是否在指定的父元素内部。

if (!$(e.target).closest('#nav-tab').length) {
    $('#nav-tab .active').remove();
}

3. 最后，我们需要找到当前选中的nav-tab，并将其删除。可以使用Bootstrap的.active类找到当前选中的tab，并使用remove方法删除该元素。

完整代码

$('body').on('click', function (e) {
    if (!$(e.target).closest('#nav-tab').length) {
        $('#nav-tab .active').remove();
    }
});

以上就是在Bootstrap中的nav-tab外部单击时，删除活动的nav-tab的方法。