tab切换，实现圆角效果

准备张圆角图片

3种样式

第一个tab样式

  
.active {
        background-color: #fff;
        position: relative;
        border-top-left-radius: 0.2rem;
        color: #a55b16;
        font-weight: 600;
        &::after {
          content: "";
          width: 0.25rem;
          height: 0.25rem;
          position: absolute;
          bottom: -13px;
          right: 0;
          background: url("../../assets/detail/8.png") no-repeat;
          background-size: cover;
        }
      }
      

 中间的tab样式

.active1 {
        background-color: #fff;
        position: relative;
        color: #a55b16;
        font-weight: 600;
        &::after,
        &::before {
          content: "";
          width: 0.25rem;
          height: 0.25rem;
          position: absolute;
          right: 0;
        }
        &::after {
          bottom: -13px;
          background: url("../../assets/detail/8.png") no-repeat;
          background-size: cover;
        }
        &::before {
          top: -13px;
          background: url("../../assets/detail/9.png") no-repeat;
          background-size: cover;
        }
      }
     

最后一个tab样式 

 .active2 {
        background-color: #fff;
        position: relative;
        color: #a55b16;
        font-weight: 600;
        &::after {
          content: "";
          width: 0.25rem;
          height: 0.25rem;
          position: absolute;
          top: -13px;
          right: 0;
          background: url("../../assets/detail/9.png") no-repeat;
          background-size: cover;
        }
      }

点击切换添加样式 

添加：节点.classList.add("类名")；

删除：节点.classList.remove("类名")；

  const getIndex = (i: number) => {
      //点击获取当前项
      const a = document.getElementsByClassName('aa')[i]
      //获取整个列表数组
      const aList = document.getElementsByClassName('aa')
      if (i === 0) {
        a.classList.add('active')
        for (let j = 0; j < aList.length; j++) {
          aList[j].classList.remove('active1', 'active2')
        }
      } else if (i === state.sliderList.length - 1) {
        a.classList.add('active2')
        for (let j = 0; j < aList.length; j++) {
          aList[j].classList.remove('active1', 'active')
        }
      } else  {
        a.classList.add('active1')
        for (let j = 0; j < aList.length; j++) {
          if (j !== i) {
            aList[j].classList.remove('active1')
          }
          aList[j].classList.remove('active', 'active2')
        }
      }
    }

感觉这么做麻烦，希望大家能提出更好的建议