如何在Bootstrap 5中获取当前激活的选项卡ID？

问题原因 #

你使用document.querySelector()仅会匹配到第一个符合button[data-bs-toggle="tab"]规则的选项卡按钮，仅为该元素绑定了shown.bs.tab事件，其余选项卡按钮没有绑定对应监听事件，因此只有点击第一个选项卡时能拿到ID，其余选项卡触发切换时没有对应的回调执行。

解决方案 #

方案1：遍历所有选项卡按钮绑定事件 #

获取所有带tab切换属性的按钮，遍历为每个按钮单独绑定事件监听：

// 获取所有选项卡切换按钮
const tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]')
// 遍历绑定事件
tabEls.forEach(tabEl => {
  tabEl.addEventListener('shown.bs.tab', function (event) {
    // 激活的选项卡按钮ID
    const activeBtnId = event.target.id
    // 如需获取对应展示的tab面板ID，可使用如下代码
    // const activePaneId = event.target.dataset.bsTarget.slice(1)
    alert(activeBtnId)
  })
})

方案2：使用事件委托（更高效） #

直接给选项卡的父容器绑定事件，利用事件冒泡机制捕获所有子选项卡触发的切换事件，无需遍历绑定：

document.querySelector('#myTab').addEventListener('shown.bs.tab', function (event) {
  const activeBtnId = event.target.id
  alert(activeBtnId)
})

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