用javascript实现的不错的一款网页选项卡

实现网页选项卡可以分为以下步骤：

1. HTML结构
   首先，在HTML文件中创建一个选项卡容器div，并在其中创建与选项卡对应的多个div，每个div代表一个选项卡卡片。还需要添加一个列表ul，每个列表项li对应一个选项卡。

<div class="tab-container">
  <ul class="tab-nav">
    <li class="tab-nav-item">选项卡1</li>
    <li class="tab-nav-item">选项卡2</li>
    <li class="tab-nav-item">选项卡3</li>
  </ul>
  <div class="tab-content">
    <div class="tab-panel">选项卡1的内容</div>
    <div class="tab-panel">选项卡2的内容</div>
    <div class="tab-panel">选项卡3的内容</div>
  </div>
</div>

1. CSS样式
   为选项卡容器和每个选项卡设置样式，使其呈现正确的布局和样式效果。

.tab-container {
  width: 500px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.tab-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-nav-item {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-bottom: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tab-nav-item.active {
  background-color: #fff;
}

.tab-content {
  border-top: 1px solid #ccc;
  padding: 10px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

1. JavaScript交互
   为每个选项卡添加点击事件，点击后切换对应选项卡的显示和隐藏。

// 获取选项卡元素
var tabNavItems = document.querySelectorAll('.tab-nav-item');
var tabPanels = document.querySelectorAll('.tab-panel');

// 给每个选项卡添加点击事件
tabNavItems.forEach(function(item, index) {
  item.addEventListener('click', function() {
    // 清除所有选项卡的激活状态
    tabNavItems.forEach(function(item) {
      item.classList.remove('active');
    });
    tabPanels.forEach(function(item) {
      item.classList.remove('active');
    });
    // 设置当前选项卡为激活状态
    this.classList.add('active');
    tabPanels[index].classList.add('active');
  });
});

示例1: 实现一个简单选项卡组件

示例2: 实现可滑动的选项卡组件