Bootstrap4标签页点击无响应 内容不切换问题排查

• 核心问题是Bootstrap版本与代码属性规则不匹配：你项目依赖的是Bootstrap 4.6.1版本，但复制的示例是Bootstrap 5版本的写法。Bootstrap 4的标签页组件识别的触发属性是data-toggle="tab"，而你代码里写的是带bs前缀的data-bs-toggle="tab"、data-bs-target，这类属性是Bootstrap 5专属的命名规则，Bootstrap 4的内置JS无法识别，因此自动绑定的切换逻辑完全不会触发。
• 你手动写的点击绑定逻辑失效的原因是选择器写错了：代码里用的选择器是#myTab a[href="#xxx"]，但你的标签触发元素是<button>标签，既不是<a>标签也没有配置href属性，选择器匹配不到任何有效DOM节点，.tab('show')方法根本没有作用到对应元素上。

Bootstrap 4已经内置了完整的标签页切换逻辑，不需要额外编写自定义JS实现切换，只要修正属性写法即可：

1. 将所有标签按钮上的data-bs-toggle="tab"替换为data-toggle="tab"
2. 将所有标签按钮上的data-bs-target属性去掉bs前缀（即保留data-target="#对应面板id"即可）

修正后的可运行代码如下：

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">home</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">profile</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">contact</div>
</div>

如果后续需要手动通过JS触发标签切换，直接选中对应的按钮元素调用tab方法即可，例如$('#profile-tab').tab('show')，不要使用不存在的元素选择器。

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