tab切换

<style>
.tab{
    width: 100%;
    height: 44px;
    background: #fff;
    font-weight: bold;
    font-size: 14px;
    color: #333;
    text-align: center;
    line-height: 20px;
    position: fixed;
    z-index: 99;
    top: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.tab span{
    display: inline-block;
    height: 41px;
    line-height: 41px;
}
.active{
    color: #09BB07;
}
.active>i {
    border-bottom: 2px solid #09BB07;
    width: 36px;
    margin: 0 auto;
    display: block;
}
</style>
<div class="tab" id="tab">
   <span class="active">待营销<i></i></span>
   <span>已营销<i></i></span>
</div>
<div class="tabdiv">
    <!-- 待营销 -->
    <div class="tabpane" style="display: block">
           222
     </div>
    <!-- 已营销 -->
    <div class="tabpane" style="display: none">
           333
    </div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    // tab切换
    var span = document.querySelectorAll('#tab span'),  //css选择器
    div = document.querySelectorAll('.tabpane');
    for(var i=0;i<span.length;i++){    //循环span标签
        span[i].idx = i;              //给span一个自定义的idx属性，将I赋值进去，下边的循环不能直接拿到这个循环的i
        span[i].onclick = function(){
            for(var j=0;j<div.length;j++){         //循环div标签
                div[j].style.display = 'none';    //每次点击都先隐藏掉div，并移除class
                span[j].classList.remove('active');
              }
            div[this.idx].style.display = 'block';           //给当前div显示出来
            this.classList.add('active');                      //增加class
          }
      }
</script>