如何检测Tab控件中特定Tab页是否选中并触发事件

你使用的是Bootstrap Tab组件，直接利用它内置的shown.bs.tab事件就能实现需求——该事件会在Tab页成功激活并显示后触发。

实现步骤 #

• 监听Tab容器的shown.bs.tab事件
• 在回调中判断当前激活的是否为目标Tab页
• 符合条件时执行自定义业务逻辑

完整代码示例 #

HTML结构（补充了Tab内容面板，确保组件完整）

<div class="col-lg-6">
    <nav class="wow fadeInUp">
        <div class="nav nav-underline border-bottom" id="nav-tab" role="tablist">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1" type="button" id="btn_cement" role="tab" aria-selected="true">tab1</button>
            <button class="nav-link ms-md-3" data-bs-toggle="tab" data-bs-target="#tab2" type="button" role="tab" aria-selected="false">tab2</button>
            <button class="nav-link ms-md-3" data-bs-toggle="tab" data-bs-target="#tab3" type="button" role="tab" aria-selected="false">tab3</button>
            <button class="nav-link ms-md-3" data-bs-toggle="tab" data-bs-target="#tab4" type="button" role="tab" aria-selected="false">tab4</button>
        </div>
    </nav>
    <!-- 对应Tab内容面板 -->
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="btn_cement">tab1内容</div>
        <div class="tab-pane fade" id="tab2" role="tabpanel">tab2内容</div>
        <div class="tab-pane fade" id="tab3" role="tabpanel">tab3内容</div>
        <div class="tab-pane fade" id="tab4" role="tabpanel">tab4内容</div>
    </div>
</div>

JavaScript逻辑

// 获取Tab容器元素
const tabContainer = document.getElementById('nav-tab');

// 监听Tab激活完成事件
tabContainer.addEventListener('shown.bs.tab', function(e) {
    // 方式1：通过Tab按钮ID判断（比如目标是id为btn_cement的tab1）
    if (e.target.id === 'btn_cement') {
        console.log('tab1已激活');
        // 执行你的自定义业务逻辑
        handleTab1Active();
    }

    // 方式2：通过Tab内容面板的选择器判断
    // if (e.target.getAttribute('data-bs-target') === '#tab1') {
    //     console.log('tab1已激活');
    //     handleTab1Active();
    // }
});

// 自定义业务函数示例
function handleTab1Active() {
    alert('tab1成为当前选中Tab，触发自定义事件');
}

关键说明 #

• shown.bs.tab事件区别于show.bs.tab：前者在Tab完全显示后触发，后者在Tab开始切换但未显示时触发
• 事件对象e可获取当前激活的Tab按钮（e.target）和上一个激活的Tab（e.relatedTarget）
• 两种判断方式可根据实际场景选择，灵活适配你的需求

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