如何在选中/取消选中时使用不同的页签项目？

<div class="tab-container">
  <div class="tab active" onclick="selectTab(1)">Tab 1</div>
  <div class="tab inactive" onclick="selectTab(2)">Tab 2</div>
  <div class="tab inactive" onclick="selectTab(3)">Tab 3</div>
</div>

.tab {
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.active {
  background-color: #f00;
  color: #fff;
}

.inactive {
  background-color: #ccc;
  color: #000;
}

function selectTab(tabIndex) {
  var tabs = document.getElementsByClassName("tab");
  
  for (var i = 0; i < tabs.length; i++) {
    if (i + 1 === tabIndex) {
      tabs[i].classList.add("active");
      tabs[i].classList.remove("inactive");
    } else {
      tabs[i].classList.add("inactive");
      tabs[i].classList.remove("active");
    }
  }
}