如何调用这种类型的导航选项卡菜单

<div class="tab-menu">
  <button class="tab-button active" onclick="openTab(event, 'tab1')">选项卡1</button>
  <button class="tab-button" onclick="openTab(event, 'tab2')">选项卡2</button>
  <button class="tab-button" onclick="openTab(event, 'tab3')">选项卡3</button>
</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-button {
  background-color: #f1f1f1;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  font-size: 16px;
}

.tab-button:hover {
  background-color: #ddd;
}

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

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

.tab-menu {
  overflow: hidden;
  background-color: #f1f1f1;
}

function openTab(event, tabName) {
  var i, tabContent, tabButton;

  tabContent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabContent.length; i++) {
    tabContent[i].style.display = "none";
  }

  tabButton = document.getElementsByClassName("tab-button");
  for (i = 0; i < tabButton.length; i++) {
    tabButton[i].className = tabButton[i].className.replace(" active", "");
  }

  document.getElementById(tabName).style.display = "block";
  event.currentTarget.className += " active";
}