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

Question

This question has been asked for Bootstrap 4 and lower but not for Bootstrap 5 I think. For Bootstrap 4 I used some Jquery like this https://www.codeply.com/go/bp/61835

When an active tab gets clicked, the 'active' class should be removed from the tab button and the tab pane should be hidden.

Does someone has a simple solution for that? I cannot get it to work without calling preventDefault() for the Bootstrap events ('show', etc) and doing everything manually.

Thanks!

Answer 1

There's a good example of how to use tabs on the Bootstrap website here .

There is still an active class which sits on the trigger eg <button> and the target (which also uses the show class), but the JS has more emphasis on control through data attributes in combination with aria (eg 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>

If you also scroll further down on the Bootstrap link above, there is a bit dedicated to JS control. eg

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

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

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

You can activate individual tabs in several ways:

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