如何通过单击按钮启用选项卡？

<div class="tab-container">
  <button id="tab1-btn" class="tab-btn active" onclick="changeTab('tab1')">Tab 1</button>
  <button id="tab2-btn" class="tab-btn" onclick="changeTab('tab2')">Tab 2</button>
  <button id="tab3-btn" class="tab-btn" onclick="changeTab('tab3')">Tab 3</button>

  <div id="tab1-content" class="tab-content active">
    <p>Tab 1 Content</p>
  </div>
  <div id="tab2-content" class="tab-content">
    <p>Tab 2 Content</p>
  </div>
  <div id="tab3-content" class="tab-content">
    <p>Tab 3 Content</p>
  </div>
</div>

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

  // 移除所有按钮的激活状态
  var tabButtons = document.getElementsByClassName("tab-btn");
  for (var i = 0; i < tabButtons.length; i++) {
    tabButtons[i].classList.remove("active");
  }

  // 显示选中的选项卡内容并激活对应按钮
  document.getElementById(tab + "-content").style.display = "block";
  document.getElementById(tab + "-btn").classList.add("active");
}

.tab-container {
  border: 1px solid #ccc;
  padding: 10px;
}

.tab-btn {
  background-color: #f1f1f1;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}

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

.tab-content {
  display: none;
  padding: 10px;
}