web实现选项卡功能

在web开发中，选项卡是一种常用的界面元素，允许用户在多个内容选项之间切换。实现选项卡功能有多种 ，本文将重点介绍一种使用HTML、CSS和JavaScript的简单 。

HTML结构

首先，我们需要为选项卡容器和选项卡按钮创建HTML结构：

<div class="tab-container">
  <ul class="tab-buttons">
    <li class="tab-button">选项卡 1</li>
    <li class="tab-button">选项卡 2</li>
  </ul>
  <div class="tab-content">
    <div class="tab-panel" data-tab="1">选项卡 1 内容</div>
    <div class="tab-panel" data-tab="2">选项卡 2 内容</div>
  </div>
</div>

CSS样式

接下来，我们需要使用CSS样式来设置选项卡的外观：

.tab-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 80px);
}
.tab-buttons {
  display: flex;
  flex-wrap: nowrap;
}
.tab-button {
  padding: 10px;
  border: 1px solid      ccc;
  border-radius: 5px;
}
.tab-button.active {
  background-color:      ddd;
}
.tab-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.tab-panel {
  display: none;
  width: 100%;
  height: 100%;
}
.tab-panel.active {
  display: block;
}

JavaScript脚本

最后，我们需要使用JavaScript脚本来控制选项卡之间的切换：

const tabButtons = document.querySelectorAll('.tab-button');
const tabPanels = document.querySelectorAll('.tab-panel');
tabButtons.forEach((button, index) => {
  button.addEventListener('click', () => {
    tabButtons.forEach((btn) => btn.classList.remove('active'));
    tabPanels.forEach((panel) => panel.classList.remove('active'));
    button.classList.add('active');
    tabPanels[index].classList.add('active');
  });
});