升级Bootstrap V4至V5后，如何修复动态标签页选中功能？

Bootstrap 5移除了jQuery依赖，同时重构了标签页组件的触发逻辑，直接通过trigger('click')触发点击事件的方式已经不再生效，需要改用官方提供的原生JS API来实现程序化切换。

修复后的代码示例 #

原生JS实现（推荐，无需jQuery） #

var v_screen = 3;
var triggerMap = {
    2: '#open-tab',
    3: '#closed-tab',
    4: '#support-tab',
    5: '#other-tab'
};

// 获取目标标签页触发元素
const tabElement = document.querySelector(triggerMap[v_screen]);
if (tabElement) {
    // 初始化Tab实例并切换到该标签页
    const tabInstance = new bootstrap.Tab(tabElement);
    tabInstance.show();
}

兼容jQuery的实现（如果仍在使用jQuery） #

var v_screen = 3;
var triggerMap = {
    2: '#open-tab',
    3: '#closed-tab',
    4: '#support-tab',
    5: '#other-tab'
};

const tabElement = $(triggerMap[v_screen])[0];
if (tabElement) {
    new bootstrap.Tab(tabElement).show();
}

原因说明 #

Bootstrap 4中标签页的切换逻辑依赖jQuery的事件绑定，直接触发click事件可以触发内部切换流程；但Bootstrap 5采用原生JS重写组件后，点击事件仅作为用户交互的入口，程序化切换必须通过组件实例的show()方法来触发，才能正确更新标签页的激活状态及内容切换。

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