Как интегрировать табы в select?

Question

[Алексей Королёв]

Хочу сделать выбор табов через select, конструкция <option VALUE="#" data-tab="1">Скриншоты</option> не работает.

Есть форма select от Bootstrap

<select class="form-select form-select-sm" aria-label=".form-select-sm example" onchange="window.location.href=this.options[this.selectedIndex].value">
  <option selected>2022</option>
  <option VALUE="#" data-tab="1">Скриншоты</option>
  <option VALUE="#" data-tab="2">2024</option>
 
</select>

Есть сами табы

<div class="nav-tabs1">
  <a href="#" data-tab="1" class="nav-tab active">Скриншоты</a>
     <a href="#" data-tab="2" class="nav-tab">Видео</a> 

</div>
          
          <div class="tab-content ">
 <div data-tab-content="1" class="tab-pane active">
       <h5 class="fw-bold mb-3 my-1">Скриншоты</h5>
  Контент
  </div>
  <div data-tab-content="2" class="tab-pane">
      <h5 class="fw-bold mb-3 my-1">Видео</h5>
контент   
 
  </div>
</div>

Есть скрипт

var tabNavs = document.querySelectorAll(".nav-tab");
var tabPanes = document.querySelectorAll(".tab-pane");

for (var i = 0; i < tabNavs.length; i++) {

  tabNavs[i].addEventListener("click", function(e){
    e.preventDefault();
    var activeTabAttr = e.target.getAttribute("data-tab");

    for (var j = 0; j < tabNavs.length; j++) {
      var contentAttr = tabPanes[j].getAttribute("data-tab-content");

      if (activeTabAttr === contentAttr) {
        tabNavs[j].classList.add("active");
        tabPanes[j].classList.add("active"); 
      } else {
        tabNavs[j].classList.remove("active");
        tabPanes[j].classList.remove("active");
      }
    };
  });
}

Ну и стили

.nav-tabs1{
  display: flex;
                margin-bottom:-17px !important;
}
.nav-tab{
 
  margin-right: 20px;
  text-decoration: none;
}
.nav-tab.active{
    border-bottom: 3px solid #0d6efd;
    padding-bottom: 12px;
  cursor: default;       
    font-weight: 700 !important;
}

.tab-pane{
  display: none;
  
    
}

Answer 1

[Сергей delphinpro]

Зачем вот это вот всё:

tabNavs[j].classList.add("active");
tabPanes[j].classList.add("active");

Откройте уже документацию и переключайте табы правильно
https://getbootstrap.com/docs/5.1/components/navs-...

Comments

[Алексей Королёв]

Хорошо, если брать бутстраповские табы

<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>
</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">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

То как тогда переключение сделать через select, всё равно не доходит

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

[Сергей delphinpro]

Алексей Королёв, А у вас не бутстраповские что-ли?

Зависит от того, какой у вас бутстрап. В четверке одно, в пятерке по другому.

Ссылка на документацию выше, там есть примеры.

То есть, вы отслеживаете onchange на вашем селекте, и в зависимости от выбранной опции активируете нужную вкладку.

var tab = bootstrap.Tab.getOrCreateInstance(document.querySelector('#trigger'))
tab.show()

[Алексей Королёв]

Сергей delphinpro, изначально в вопросе нет. Код не мой, но разгребать пришлось мне и я впал в ступор. С js мало работаю, поэтому тяжело. Используется последняя версия Bootstrap. Буду очень благодарен если покажешь на примере, чтобы работала такая конструкция:

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

[Сергей delphinpro]

Алексей Королёв, в этой конструкции нет табов.

ну будет работать с таким кодом

const map = {
  "1": document.getElementById('pills-home'),
  "2": document.getElementById('pills-profile'),
  "3": document.getElementById('pills-contact'),
}

document.querySelector('.form-select').addEventListener('change', function(event) {
  const el = map[event.target.value];
  document.querySelectorAll('.tab-pane').forEach(function(tab){
    tab.classList.remove('show');
    tab.classList.remove('active');
  });
  el.classList.add('show');
  el.classList.add('active');
});