如何用原生JavaScript实现Bootstrap 5所有标签页的切换事件？

官方示例代码仅能触发第一个标签页事件的核心原因：document.querySelector('button[data-bs-toggle="tab"]')仅会匹配第一个符合选择器的元素，因此只有第一个标签页按钮绑定了事件监听。

以下是两种无需jQuery的原生JS解决方案：

方案一：遍历所有标签页按钮绑定事件 #

适合标签页数量固定的场景，直接选中所有目标按钮并逐个添加事件监听：

// 选中所有带有data-bs-toggle="tab"属性的按钮
const tabButtons = document.querySelectorAll('button[data-bs-toggle="tab"]');

// 循环为每个按钮绑定shown.bs.tab事件
tabButtons.forEach(tabEl => {
  tabEl.addEventListener('shown.bs.tab', function(e) {
    console.log('当前激活的标签页:', e.target);
    console.log('上一个激活的标签页:', e.relatedTarget);
  });
});

方案二：事件委托（推荐） #

通过将事件监听绑定到标签页的父容器，利用事件冒泡机制处理所有标签页的触发事件，适合动态新增标签页的场景，无需重复绑定事件：

// 获取标签页的父容器（默认类为.nav-tabs，可根据实际DOM结构调整）
const tabContainer = document.querySelector('.nav-tabs');

// 在父容器上绑定事件委托
tabContainer.addEventListener('shown.bs.tab', function(e) {
  // 确保事件源是标签页按钮
  if (e.target.matches('button[data-bs-toggle="tab"]')) {
    console.log('当前激活的标签页:', e.target);
    console.log('上一个激活的标签页:', e.relatedTarget);
  }
});

内容的提问来源于stack exchange，提问作者Ersin Güvenç