一次应打开一个选项卡，当单击另一个选项卡时，其选项卡应显示在目标上

<ul class="tabs">
  <li onclick="openTab(event, 'tab1')">选项卡1</li>
  <li onclick="openTab(event, 'tab2')">选项卡2</li>
  <li onclick="openTab(event, 'tab3')">选项卡3</li>
</ul>
<div id="tab1" class="tab-content">选项卡1的内容</div>
<div id="tab2" class="tab-content">选项卡2的内容</div>
<div id="tab3" class="tab-content">选项卡3的内容</div>

.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tabs li {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}

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

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

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

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

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

  // 显示目标选项卡内容，并将目标选项卡设置为选中状态
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.classList.add("active");
}