javascript - 带有内容的 Bootstrap 4 选项卡无法正确使用仪表板

Question

我想使用 bootstrap 中的仪表板模板来构建一个简单的页面，但目前我无法在导航栏中实现选项卡，主体中有不同的内容 Pane 。

总体而言，它使用两个 Pane ，但是当我从第一个 Pane 切换到第二个 Pane 并再次返回到第一个 Pane 时，我看到两个选项卡内容都显示了。当我再次切换时，它工作正常(尽管第一个选项卡中的列表元素不再设置为事件状态)。

我创建了一个无法正常工作的 jsfiddle，但是 hunzaboys codepen工作正常并显示我的问题。

我的错误在哪里？为什么切换回来时两个标签内容都显示？

编辑:

问题似乎是在选项卡中嵌套了另一个导航栏，尤其是选项卡中有两个“事件”类似乎会导致问题(即使事件元素不是导航项或其他内容)。

我做了一个新的例子:https://codepen.io/anon/pen/KXMoRV

如果您在顶部导航栏之间切换到“Einstellungen”并再次返回“Überblick”，您将看到两个内容 Pane 同时处于事件状态。

如果您重新加载页面并从第 45 行的按钮中删除“事件”类，则不会发生这种情况。

                    <button class="btn btn-primary active" type="button">Test</button>

谁能帮帮我？

在此先感谢您的帮助!

Answer 1

我自己解决了这个问题，因为我在任何地方都找不到合适的答案或解决方案。

我没有在顶部导航栏及其每个内容 Pane 中使用 bootstrap 的导航功能，而是现在只在内容 Pane 中使用 bootstrap 导航并手动控制顶部导航栏。

我制作了一个代码笔来显示当前状态和预期的行为:

https://codepen.io/anon/pen/KXWvLV

这是手动控制 div 和模拟导航行为的代码:

$("#link-overview").on("click", function () {
    console.log("[INFO] Showing overview");
    $("#pane-overview").show();
    $("#pane-settings").hide();
    }
});

$("#link-settings").on("click", function () {
    console.log("[INFO] Showing settings");
    $("#pane-settings").show();
    $("#pane-overview").hide();
    }
});