单击时关闭活动的 Bootstrap 5 选项卡

Question

这个问题已被问到 Bootstrap 4 及更低版本，但我认为不是 Bootstrap 5。 对于 Bootstrap 4，我使用了一些像这样的 Jquery https://www.codeply.com/go/bp/61835

单击活动选项卡时，应从选项卡按钮中删除“活动”类，并隐藏选项卡窗格。

有人有一个简单的解决方案吗？ 如果不为 Bootstrap 事件（“显示”等）调用 preventDefault() 并手动执行所有操作，我将无法使其工作。

谢谢！

Answer 1

这里有一个很好的例子来说明如何在Bootstrap 网站上使用选项卡。

仍然有一个active类位于触发器上，例如<button>和目标（也使用show类），但 JS 更强调通过数据属性结合 aria 进行控制（例如aria-selected="true" ):

<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>

... 

<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>

如果您还在上面的 Bootstrap 链接上进一步向下滚动，则有一些专门用于 JS 控制。 例如

通过 JavaScript 启用可选项卡（每个选项卡需要单独激活）：

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

您可以通过多种方式激活单个选项卡：

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab