js实现tab选项卡切换

好的，以下是一个简单的JavaScript实现选项卡切换的示例代码：

HTML部分：

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

CSS部分：

.tab-container {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}
.tab-header {
  display: flex;
}
.tab {
  padding: 10px 20px;
  background-color: #f0f0f0;
  cursor: pointer;
  border-right: 1px solid #ccc;
  border-bottom: none;
  user-select: none;
}
.tab:last-child {
  border-right: none;
}
.tab.active {
  background-color: #fff;
}
.tab-content {
  padding: 20px;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

JavaScript部分：

function openTab(evt, tabName) {
  // 获取所有选项卡和对应内容的元素
  var tabs = document.getElementsByClassName("tab");
  var tabPanes = document.getElementsByClassName("tab-pane");
  // 隐藏所有内容
  for (var i = 0; i < tabPanes.length; i++) {
    tabPanes[i].style.display = "none";
  }
  // 取消所有选项卡的激活状态
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove("active");
  }
  // 显示当前选项卡对应的内容和激活当前选项卡
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.classList.add("active");
}

以上代码实现了一个简单的选项卡切换，点击选项卡可以切换对应的内容。