部分中的引导选项卡

Posted 2023-05-08

【中文标题】部分中的引导选项卡

【英文标题】：Bootstrap tabs in sections

【发布时间】：2020-07-19 22:12:30

【问题描述】：

我从标准引导选项卡控件开始，我想将选项卡拆分为多个部分。我通过为整个地块制作一个 div 和为每个部分制作一个 div 来做到这一点，它有自己的 ul 选项卡。这工作正常，除了活动类只清除与刚刚变为活动的选项卡相同的 ul 中的非活动选项卡，因此我最终在每个组中最多有一个选项卡显示为活动。我有一些 js 使用 Jquery 将它们全部停用，然后重新激活刚刚激活的那个（见下文），但这感觉有点像 hack。有没有办法告诉引导程序所有这些 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 选项卡，但仍应将它们视为一组选项卡，因为它们仅控制一个选项卡窗格，因此一次只能激活一个选项卡。

【参考方案1】：

我是否正确理解您有 2 个级别的选项卡

Level one -> Tab1 active | Tab2   | Tab3   | Tab4   | Tab5   |
Level two -> Tab1.1  | Tab1.2   | Tab1.3 active| Tab1.4   | Tab1.5   

此级别 2 存在于部分/所有级别 1 选项卡中。那么如果没有显示，第 2 级上的选项卡保持活动状态有什么问题。 Bootstrap 使用它来向您显示第 2 级上最后选择的选项卡。 如果你不喜欢它，你有两个可能性

破解所有活动状态（为什么？）或 在您需要的某些规则上选择新选项卡级别 1 时分配活动。

无需清除所有活动级别2来识别当前级别1的活动使用parent=active和child=active关系来识别级别2上的当前标签 编辑 如果你用 ul 分隔，那么对于 bootstrap，它是一个不同的菜单。因此，如果您想通过样式或与其他 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 -->

在navs documentation 或navbar documentation 中阅读更多内容

【讨论】：

嗨@Codebreaker007，这不是我想要的。我已经编辑了问题以显示我想要更好的内容。简而言之，正如您所说，所有选项卡都处于同一“级别”，只是按部分分组。谢谢你的回答。