fragment创建一个选项卡

<ul class="tab-menu">
  <li class="active">选项卡1</li>
  <li>选项卡2</li>
  <li>选项卡3</li>
</ul>

<div class="tab-content">
  <div class="tab-item active">选项卡1的内容</div>
  <div class="tab-item">选项卡2的内容</div>
  <div class="tab-item">选项卡3的内容</div>
</div>

.tab-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tab-menu li {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tab-menu li.active {
  background-color: #fff;
}

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

.tab-item {
  display: none;
}

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

// 获取选项卡的标签元素和内容元素
var tabMenu = document.querySelector('.tab-menu');
var tabItems = document.querySelectorAll('.tab-item');

// 给选项卡的标签绑定点击事件
tabMenu.addEventListener('click', function(event) {
  // 清除之前选中的标签的active样式
  tabMenu.querySelector('.active').classList.remove('active');
  // 清除之前显示的内容的active样式
  tabItems.forEach(function(tabItem) {
    tabItem.classList.remove('active');
  });
  // 给当前点击的标签添加active样式
  var clickedTab = event.target;
  clickedTab.classList.add('active');
  // 获取当前点击的标签的索引
  var index = Array.prototype.indexOf.call(tabMenu.children, clickedTab);
  // 显示对应索引的内容
  tabItems[index].classList.add('active');
});