如何从javascript/html中内置的选项卡开始，而不是空白并必须单击一个选项卡

<div class="tab-container">
  <div class="tab-header">
    <div class="tab" onclick="changeTab(0)">Tab 1</div>
    <div class="tab" onclick="changeTab(1)">Tab 2</div>
    <div class="tab" onclick="changeTab(2)">Tab 3</div>
  </div>
  <div class="tab-content">
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
  </div>
</div>

.tab-container {
  width: 300px;
}

.tab-header {
  display: flex;
}

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

.tab-content {
  margin-top: 10px;
}

.content {
  display: none;
  padding: 10px;
  background-color: #f9f9f9;
}

// 默认显示第一个选项卡内容
document.getElementsByClassName("content")[0].style.display = "block";

function changeTab(index) {
  // 隐藏所有选项卡内容
  var contents = document.getElementsByClassName("content");
  for (var i = 0; i < contents.length; i++) {
    contents[i].style.display = "none";
  }
  
  // 显示点击的选项卡内容
  contents[index].style.display = "block";
}