如何在切换标签页时获取active tab-pane的ID并转换存储输出

DevOps 小满

2026-8-10

切换标签页时获取对应数值并打印的实现方案

需求：切换标签页时，自动获取当前激活的tab-pane的ID，将tab-pane1/tab-pane2/tab-pane3分别对应转为数值1/2/3存入变量，并在控制台打印该变量。以下提供两种实现方式：

jQuery 实现

// 监听标签切换完成事件（Bootstrap官方触发事件）
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function () {
    // 获取当前激活的tab-pane的ID
    const activeTabId = $('.tab-pane.active').attr('id');
    // 提取ID中的数字并转为数值变量
    const tabNumber = parseInt(activeTabId.replace('tab-pane', ''), 10);
    // 打印变量
    console.log(tabNumber);
});

// 页面初始化时，打印初始激活的标签对应数值
const initialActiveId = $('.tab-pane.active').attr('id');
const initialTabNumber = parseInt(initialActiveId.replace('tab-pane', ''), 10);
console.log(initialTabNumber);

原生 JavaScript 实现

// 获取所有带标签切换功能的按钮
const tabLinks = document.querySelectorAll('a[data-bs-toggle="tab"]');

// 为每个标签按钮绑定切换完成事件
tabLinks.forEach(link => {
    link.addEventListener('shown.bs.tab', function() {
        // 获取当前激活的tab-pane元素
        const activeTab = document.querySelector('.tab-pane.active');
        // 提取ID末尾的数字并转为数值
        const tabNumber = parseInt(activeTab.id.slice(-1), 10);
        console.log(tabNumber);
    });
});

// 页面加载完成后，打印初始激活标签的对应数值
const initialActiveTab = document.querySelector('.tab-pane.active');
const initialTabNumber = parseInt(initialActiveTab.id.slice(-1), 10);
console.log(initialTabNumber);