How to integrate tabs in select?

Question

css

I want to make a choice of tabs through select, the design <option VALUE="#" data-tab="1">Скриншоты</option>does not work.

There is a select form from 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>

There are tabs themselves

<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>

There is a script

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");
      }
    };
  });
}

Well, styles

.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

Why is this all here:

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

Open the documentation already and switch tabs correctly
https://getbootstrap.com/docs/5.1/components/navs-...