Javascript 引导4个选项卡，其中的内容无法正确使用仪表板

我想使用bootstrap中的dashboard模板来构建一个简单的页面，但目前我无法在导航栏中实现选项卡，正文中有不同的内容窗格

总的来说，它使用两个窗格，但当我从第一个窗格切换到第二个窗格，再切换回第一个窗格时，我看到两个选项卡内容都显示出来。当我再次切换时，它工作正常（尽管第一个选项卡中的列表元素不再设置为活动）

我创建了一个工作不正常的JSFIDLE，但hunzaboys工作正常，并显示了我的问题

我的错误在哪里？为什么切换回时会同时显示两个选项卡内容

编辑：

问题似乎是在选项卡中嵌套了另一个导航栏，特别是在选项卡中有两个“活动”类似乎会导致问题（即使活动元素不是导航项或其他东西）

我举了一个新的例子：

如果您在顶部导航栏切换到“Einstellungen”并再次切换回“Überblick”，您将看到两个内容窗格同时处于活动状态

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

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

测试

有人能帮我吗

---

提前感谢您的帮助

根据Boostrap文档，您的票据未按正确顺序包含

代码笔：

/*
*基础结构
*/
/*向下移动内容，因为我们有一个3.5雷姆高的固定导航栏*/
身体{
垫面：3.5rem；
}
/*
*印刷术
*/
h1{
边缘底部：20px；
填充底部：9px；
边框底部：1px实心#eee；
}
/*
*边栏
*/
.侧边栏{
位置：固定；
top:51px；
底部：0；
左：0；
z指数：1000；
填充：20px；
溢出x：隐藏；
溢出y：自动；
/*如果视口比内容短，则可滚动内容*/
右边框：1px实心#eee；
}
/*侧栏导航*/
.侧边栏{
左侧填充：0；
右边填充：0；
}
.侧栏.导航{
边缘底部：20px；
}
.侧栏.导航项{
宽度：100%；
}
.侧栏.导航项目+.导航项目{
左边距：0；
}
.侧栏.导航链接{
边界半径：0；
}
/*
*仪表板
*/
/*占位符*/
.占位符{
垫底：3rem；
}
.占位符img{
垫面：1.5rem；
垫底：1.5rem；
}

仪表板
标签
别的
标签
别的
标签
别的
标签
别的








艾因斯特伦根
标签
别的

我自己解决了这个问题，因为我还没有找到合适的答案或解决方案

我现在只在内容窗格中使用引导导航，并手动控制顶部导航栏，而不是在顶部导航栏及其每个内容窗格中使用引导导航功能

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

以下是手动控制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();
    }
});

---

如果打开控制台，则会出现一些与bootstrap.js和jquery相关的错误。您需要在bootstrap之前添加jquery。Aaah我可以更改资源的顺序，谢谢。我更新了fiddle（），但它总是说我需要popper.js，即使它已经包含在内。检查我的回答是为了使用B4，你需要添加popper.js。如果您想使用js文件，这是一个要求。我更正了顺序，但它没有正确加载popper.js。所以我知道使用了hunzaboy创建的codepen示例。在选项卡之间切换时显示我的问题。是。我更新了JSFIDLE，但它不会正确加载popper.js。我像您提到的那样更新了JSFIDLE，并手动插入了jQuery、Popper和Bootstrap的.css和.js及其工作原理。另外，我的问题在jsfiddle/codepen示例中可见。我无法复制您的问题。你能在我链接的代码笔中进一步解释你的问题吗。是：（1）重新加载代码笔（2）切换到“Einstellungen”导航项（3）切换回“Überblick”导航项（4）向下滚动，您应该可以看到两个内容窗格（第一个“仪表板”和“Einstellungen”下方）。再次在导航项目之间切换将解决问题，但在“Überblick”窗格中，“传感器1”列表项目不再处于活动状态。我希望你能用这个步骤重复我的问题，你能再看看我更新的代码笔例子吗？嵌套的选项卡和选项卡窗格无法正常工作，这破坏了我的整个页面设计