web tab切换滚动

原生js实现Tab切换+箭头滚动_原生js tab切换class-优快云博客

  <ul class="tabs">
              <li class="tab-item active">tab1tab1tab1</li>
              <li class="tab-item">tab2</li>
              <li class="tab-item">tab3</li>
              <li class="tab-item">tab4</li>
              <li class="tab-item">tab5</li>
              <li class="tab-item">tab6</li>
              <li class="tab-item">tab7</li>
              <li class="tab-item">tab8</li>
            </ul>

 var tabItem = document.getElementsByClassName("tab-item");
    for (let ele = 0; ele < tabItem.length; ele++) {
      tabItem[ele].onclick = function () {
        //循环去除全部active的class
        for (let i = 0; i < tabItem.length; i++) {
          tabItem[i].classList.remove("active");
        }
        //给当前item添加active的class
        tabItem[ele].classList.add("active");
      };
    }