javascript - Bootstrap 4 - 嵌套导航链接仅在第一次打开选项卡内容

Question

我正在尝试创建一个垂直嵌套导航，它会在单击时打开一个选项卡。但是，嵌套级别中的链接会导致选项卡打开时出现异常。

我这里有一个 JS fiddle 来说明这个问题:

https://jsfiddle.net/2v2qwnkc/1/

重现:

1. 单击报告 > 电话。这会按预期将“电话内容”加载到选项卡内容区域。
2. 现在，单击主页。什么都不会发生。
3. 接下来，单击个人资料。个人资料内容将加载。
4. 最后，再次点击电话。什么都不会发生。

非常感谢任何帮助。

Answer 1

我相信你的问题的核心是嵌套 .nav 元素。

tab.js插件就像您的父子 nav 是分开的一样。你可以通过一个简单的事实来判断它让两个元素同时拥有一个 .active 类:

实际问题似乎出在插件的 148 行:

activeElements = $(container).children(Selector.ACTIVE)

children 方法仅返回您的父级 .nav 的直接子级。 #phone-tab 是后代，而不是子代，因此从未包含在内。

如果我们去掉您嵌套的 .nav，点击 Home 链接就可以了，但是 Phone 将保持标记为事件状态。如果我们深入挖掘，我们会发现负责删除 .active 类的行仅适用于第一个元素:

const active = activeElements[0]

我的结论是，您需要大量修改此插件以使其适用于您的情况，或者创建您自己的自定义解决方案。