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

Question

我尝试创建一个垂直嵌套导航，在单击时打开一个标签。但是，嵌套级别中的链接会导致选项卡打开以启动行为不端。

我这里有一个JS小提琴，说明了问题：

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

重现：

1. 点击Home。这将加载电话内容＆＃34;按预期进入标签内容区域。
2. 现在，点击Profile。什么都不会发生。
3. 接下来，点击Phone。个人资料内容会加载。
4. 最后，再次点击{{1}}。什么都不会发生。

非常感谢任何帮助。

Answer 1

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

tab.js插件的行为就像您的父母nav是分开的。您可以通过一个简单的事实看出，它使两个元素同时具有一个.active类：

实际问题似乎在插件的148行上：

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

children方法仅返回父元素.nav的直接子元素。 #phone-tab是后代，而不是孩子，因此从不包括在内。

如果我们摆脱了嵌套的.nav，则单击“主页”链接将起作用，但是“电话”将保持标记为活动状态。如果深入研究，我们发现负责删除.active类的行仅适用于第一个元素：

const active = activeElements[0]

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