原生JS 选项卡轮播 （简版）

css 样式

 .active-btn{
      background-color: pink;
    }
    div{
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      display: none;
    }
    .active-content{
      display: block;
    }

html 结构

 <button class="active-btn">按钮一</button>
  <button>按钮二</button>
  <button>按钮三</button>
  <div class="active-content"> 内容一</div>
  <div>内容二</div>
  <div>内容三</div>

JS 

  var btn = document.querySelectorAll("button");
    var div = document.querySelectorAll("div");
    var num = 0;
    for (var i = 0; i < btn.length; i++) {
      btn[i].index = i;
      div[i].onclick = function () {
        for (var i = 0; i < btn.length; i++) {
          btn[i].className = "";
          div[i].className = "";
        }
        this.className = "active-btn";
        div[this.index].className = "active-content";
        num = this.index;
      };
    }
    // 自动轮播
    setInterval(function () {
      num++;
      num %= 3;
      for (var i = 0; i < btn.length; i++) {
        btn[i].className = "";
        div[i].className = "";
      }
      btn[num].className = "active-btn";
      div[num].className = "active-content";
    }, 1000);