16tab切换方法及代码实现

Markdown格式内容，请见以下代码块：

16个Tab切换

这是一段16个Tab切换的代码，其中包括HTML、CSS和JS部分。可以直接复制粘贴，并根据自己的需求进行修改。

HTML部分

<div class="tabBox">
  <div class="tabBtns">
    <span class="active">按钮1span>
    <span>按钮2span>
    <span>按钮3span>
    <span>按钮4span>
    <span>按钮5span>
    <span>按钮6span>
    <span>按钮7span>
    <span>按钮8span>
    <span>按钮9span>
    <span>按钮10span>
    <span>按钮11span>
    <span>按钮12span>
    <span>按钮13span>
    <span>按钮14span>
    <span>按钮15span>
    <span>按钮16span>
  div>
  <div class="tabCons">
    <div class="active">内容1div>
    <div>内容2div>
    <div>内容3div>
    <div>内容4div>
    <div>内容5div>
    <div>内容6div>
    <div>内容7div>
    <div>内容8div>
    <div>内容9div>
    <div>内容10div>
    <div>内容11div>
    <div>内容12div>
    <div>内容13div>
    <div>内容14div>
    <div>内容15div>
    <div>内容16div>
  div>
div>

CSS部分

.tabBox {
  width: 100%;
}

.tabBtns {
  width: 100%;
  height: 50px;
  background-color: #eee;
  line-height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tabBtns span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% / 16);
  text-align: center;
  cursor: pointer;
}

.tabBtns .active {
  background-color: #fff;
}

.tabCons {
  width: 100%;
  height: 300px;
  background-color: #f5f5f5;
  text-align: center;
}

.tabCons div {
  display: none;
}

.tabCons .active {
  display: block;
}

JS部分

// 获取元素
var tabBtns = document.querySelector('.tabBtns');
var tabCons = document.querySelector('.tabCons');
var btns = tabBtns.querySelectorAll('span');
var cons = tabCons.querySelectorAll('div');

// 默认选中第一个
btns[0].classList.add('active');
cons[0].classList.add('active');

// 绑定点击事件
for (var i = 0; i < btns.length; i++) {
  btns[i].index = i;
  btns[i].onclick = function () {
    for (var j = 0; j < btns.length; j++) {
      btns[j].classList.remove('active');
      cons[j].classList.remove('active');
    }
    this.classList.add('active');
    cons[this.index].classList.add('active');
  }
}