我从一个标准的引导选项卡控件开始，我想将选项卡拆分为多个部分。我通过为整个批次创建一个div，为每个部分创建一个div。这很好，只是活动类只在与刚刚变为活动的选项卡相同的ul中为非活动选项卡清除，所以我最终发现每个组中最多有一个选项卡显示为活动。我有一个js，它使用Jquery将它们全部停用，然后重新激活刚刚激活的一个(见下文(，但这感觉有点像黑客。有没有办法告诉bootstrap，所有这些ul实际上都是一个选项卡控件？
let tabs = $('#tabs li');
tabs.find('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
tabs.removeClass('active');
$(e.target).parent('li').addClass('active');
});
编辑：这样做的预期结果是：Section 1: { Tab1, Tab2, Tab3 }, Section 2: { Tab4, Tab5.active }每个部分都有自己的选项卡UL，但它们仍然应该被视为一组选项卡，因为它们只控制一个选项卡窗格，因此一次只能激活一个选项卡。
我是否正确理解您有两个级别的选项卡
Level one -> Tab1 active | Tab2 | Tab3 | Tab4 | Tab5 |
Level two -> Tab1.1 | Tab1.2 | Tab1.3 active| Tab1.4 | Tab1.5
对于某些/所有级别1选项卡，存在此级别2。那么，如果没有显示，那么级别2上的选项卡保持活动状态有什么问题呢。Bootstrap使用它来显示级别2上最后一个选择的选项卡
如果你不喜欢它，你有两个位置
- 破解以清除所有活动状态(为什么？(或
- 在某些需要的规则上选择新选项卡级别1时，可以指定活动
无需清除所有活动级别2来识别当前级别的活动1使用parent=active和child=active关系来识别级别2上的当前选项卡
编辑
如果用ul分隔，则引导程序将使用不同的菜单。所以，如果你想通过造型来使用标准功能
或者与其他css元素一起使用。打破"标准行为"然后到处乱闯是没有好处的。这将是地狱般的维护和更新。所以你的"节"应该是css组。
例如：
<li class="divider"></li> <!-- standard -->
<li class="my_seperator"></li> <!-- style my_seperator as you want with css
- you can make it look like ul
if you copy the ul styling from bootstrap.css -->
阅读导航文档或导航条文档中的更多信息