如何使用函数更改活动选项卡。？

function changeTab(tabId) {
  // 首先隐藏所有选项卡内容
  var tabContents = document.getElementsByClassName("tab-content");
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "none";
  }

  // 取消所有选项卡的活动状态
  var tabs = document.getElementsByClassName("tab");
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove("active");
  }

  // 显示选中选项卡的内容并设置为活动状态
  var selectedTab = document.getElementById(tabId);
  selectedTab.style.display = "block";
  selectedTab.classList.add("active");
}

<div class="tab" onclick="changeTab('tab1')">选项卡1</div>
<div class="tab" onclick="changeTab('tab2')">选项卡2</div>
<div class="tab" onclick="changeTab('tab3')">选项卡3</div>

<div id="tab1" class="tab-content">选项卡1的内容</div>
<div id="tab2" class="tab-content">选项卡2的内容</div>
<div id="tab3" class="tab-content">选项卡3的内容</div>

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

.tab.active {
  background-color: #ccc;
}

.tab-content {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
}