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

Posted 2023-03-05

【中文标题】Bootstrap 4 - 嵌套导航链接仅第一次打开选项卡内容

【英文标题】：Bootstrap 4 - nested navigation link opens tab content only the first time

【发布时间】：2018-07-26 14:49:53

【问题描述】：

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

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

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

复制：

点击Reports > Phone。这将按预期将“电话内容”加载到选项卡内容区域中。 现在，点击Home。什么都不会发生。 接下来，单击Profile。将加载个人资料内容。 最后，再次点击Phone。什么都不会发生。

非常感谢任何帮助。

【参考方案1】：

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

tab.js 插件就像你的父母和孩子navs 是分开的。你可以从一个简单的事实看出，它让两个元素同时拥有一个 .active 类：

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

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

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

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

const active = activeElements[0]

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