如何为nav-tab的活动选项卡设置样式

<ul class="nav-tab">
  <li class="active">选项卡1</li>
  <li>选项卡2</li>
  <li>选项卡3</li>
</ul>

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

<ul class="nav-tab">
  <li onclick="setActiveTab(this)">选项卡1</li>
  <li onclick="setActiveTab(this)">选项卡2</li>
  <li onclick="setActiveTab(this)">选项卡3</li>
</ul>

function setActiveTab(tab) {
  // 移除所有选项卡的活动样式
  var tabs = document.querySelectorAll('.nav-tab li');
  tabs.forEach(function(tab) {
    tab.classList.remove('active');
  });

  // 设置当前选项卡为活动状态
  tab.classList.add('active');
}