我想要创建底部选项卡导航，但它失败并显示错误

<div class="tab-container">
  <div class="tab" onclick="openTab('tab1')">选项卡1</div>
  <div class="tab" onclick="openTab('tab2')">选项卡2</div>
  <div class="tab" onclick="openTab('tab3')">选项卡3</div>
</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-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f0f0f0;
  height: 50px;
}

.tab {
  cursor: pointer;
  padding: 10px;
}

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

.tab-content.show {
  display: block;
}

function openTab(tabId) {
  // 隐藏所有选项卡内容
  var tabContents = document.getElementsByClassName("tab-content");
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].classList.remove("show");
  }
  
  // 显示当前选中的选项卡内容
  var tabContent = document.getElementById(tabId);
  tabContent.classList.add("show");
}