Javascript Bootstrap 4 tab.js活动状态卡滞

4个

tab.js

示例中的2个在CodePen和本地html文件中对我不起作用。在“导航”示例中，下拉列表中的项目保持活动状态，单击“方式”后无法再次访问。垂直选项卡中的所有项目也是如此：

起初，我认为在提供的代码片段中可能有一个bug，但即使我使用inspector工具复制工作示例的标记，这些bug仍然存在。这让我觉得我包含引导文件的方式有问题

包括以下CDN文件：

CSS:

JavaScript:

在macOS 10.12.6、Chrome 60和Firefox 55上测试

---

编辑：它在使用Bootstrap 3.3.7:时确实有效，因此它一定是Bootstrap中的一个错误。

如果您的问题与垂直和垂直方向有关，我建议添加以下处理程序：

$('.nav-pills > a').on('shown.bs.tab', function (e) {
    $(this).siblings().removeClass('active');
})
$('.nav-pills .dropdown').on('show.bs.dropdown', function (e) {
    $(this).siblings().find('.active').removeClass('active');
})

请记住：ID必须是唯一的（请参阅：myTab）

$（'.nav>a'）.on（'show.bs.tab'，函数（e）{
$（this.sides（）.removeClass（'active'）；
})
$（'.nav.dropdown'）.on（'show.bs.dropdown'，函数（e）{
$（this）.sides（）.find（'.active'）.removeClass（'active'）；
})

#v-pills-tab{
浮动：左；
显示：内联块；
宽度：50%；
}
#维生素B含量{
浮动：左；
显示：内联块；
宽度：50%；
}
.集装箱{
边缘顶部：30px；
边缘底部：30px；
}
氢{
利润率：15px0；
}

保险商实验室








1.
2.
3.
4.
导航
1.
2.
3.
4.
药丸








1.
2.
3.
4.
垂直的
1.
2.
3.
4.

这似乎在beta版中得到了解决：

谢谢！虽然这个代码段可以工作，但这不应该是引导的一部分吗？另外，更新了重复的ID。我没有答案。我可能只建议在需要时使用js。我想在bostrap的最终版本中，所有问题都会得到解决。好的，谢谢你的帮助。我在v4.4.1中提交了一个问题：2020，当尝试使用两个单独的菜单操作相同的选项卡窗格时，这仍然是一个问题。幸运的是，@gaetanoM的解决方案有效！为我工作。谢谢你，先生！