Как сделать переключение табов Bootstrap отдельной кнопкой внутри таба?

Question

[lekseykorolev]

Здравствуйте эксперты. Хочу внутри тела таба сделать кнопку для переключения на следующий слайд. Перепробовал все методы - не вышло. Задумка в форме регистрации, разбитой по этапам (табам). Сам список табов останется в виде полосок, а кнопка будет переключать на следующий таб, на последнем табе будет кнопка зарегистрироваться, а в предыдущих будет кнопка Далее. Как такое реализовать?

Версия бутстрап 5.2

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <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>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
<button>Далее</button>
</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
<button>Далее</button>
</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Answer 1

[Сергей delphinpro]

Сделайте самые обычные кнопки. Повесьте на них js-обработчики.
Как управлять табами из javascript написано в документации getbootstrap.com/.../navs-tabs/#javascript-behavior

Comments

[lekseykorolev]

Наверное если бы я понимал как это сделать для кнопки я бы не писал?

[Сергей delphinpro]

lekseykorolev, ну там же примеры есть

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

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

Постарайтесь понять как это работает и труда не составит сделать свою кнопку.

[Сергей delphinpro]

В каждом табе (кроме последнего) по клику на кнопку триггерите следующий таб.
Как-то так для одной кнопки:

const nextTabElement = .querySelector('....'); // это следующая вкладка
const nextTabTrigger = new bootstrap.Tab(nextTabElement);
const button =  .querySelector('....'); // Это ваша кнопка
button.addEventListener('click', event => {
    nextTrigger.show(); // переключить на следующую вкладку
});

PS. Полный код писать лень. Просто показываю основной принцип.