Bootstrap如何强制重新激活当前标签页触发show.bs.tab事件

Bootstrap 自带的 Tab 组件调用tab('show')方法时，会先判断目标标签是否已经带有active类，如果已经是激活状态，会直接中断执行，不会触发show.bs.tab、shown.bs.tab等系列事件，这是组件内置的防重复触发逻辑，所以直接对已激活标签调用方法不会有任何反应。

方案1：临时移除激活类绕过组件判断 #

在调用tab('show')前，手动移除当前激活标签的active类，让组件判定标签处于未激活状态，就会走完整的执行流程触发对应事件：

window.addEventListener('resize', function(event) {
  total.forEach(function(item, i) {
    const active_link = item.querySelector("li .nav-link.active")
    if (!active_link) return
    // 临时移除激活态，绕过组件的前置判断
    active_link.classList.remove('active')
    $(active_link).tab("show")
  });
})

注意：这个方案属于取巧绕过组件逻辑，会完整触发所有tab切换相关的事件，如果你在hide.bs.tab、hidden.bs.tab这些事件上绑了别的逻辑（比如面板重绘、埋点上报），会被无意义重复触发，非必要不推荐用。

方案2：抽离自定义逻辑直接调用（推荐） #

你触发show.bs.tab事件的核心目的是执行动画框移动这类自定义UI逻辑，本质不需要真的重新走一遍标签切换流程，完全可以把这部分逻辑抽成独立函数，在需要的场景直接调用：

// 抽离独立的指示器动画逻辑
function updateTabIndicator(activeTabLink) {
  // 此处放你原来写在show.bs.tab回调里的逻辑
  // 比如计算激活标签的位置、宽度，移动动画框等
}

// 标签正常切换时，调用抽离的函数
$('.nav-link').on('show.bs.tab', function () {
  updateTabIndicator(this)
})

// 窗口resize时，直接获取当前激活标签调用函数即可，不需要触发tab事件
window.addEventListener('resize', function () {
  total.forEach(function(item) {
    const active_link = item.querySelector("li .nav-link.active")
    if (active_link) updateTabIndicator(active_link)
  })
})

这个方案没有多余的组件流程消耗，也不会意外触发其他绑定在tab切换事件上的逻辑，业务逻辑和组件事件解耦更清晰，是更合理的实现方式。

内容的提问来源于stack exchange，提问作者Ahmad