js

$('.tabsinner').click(function () {
            var i = $(this).index();//下标第一种写法
            //var i = $('tit').index(this);//下标第二种写法
            $(this).addClass('active').siblings().removeClass('active');
            // $('#con li').eq(i).show().siblings().hide();
        });

<div class="tabs">
                    <div class="tabsinner active">
                        <span>当日</span>
                        <div class="line"></div>
                    </div>
                    <div class="tabsinner">
                        <span>累计</span>
                        <div class="line"></div>
                    </div>
                </div>

scss

.tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  position: absolute;
  left: 100px;
  top: 10px;
  z-index: 10;

  .tabsinner {
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;

    span {
      font-size: 16px;
      color: #fff;
      line-height: 25px;
    }

    .line {
      width: 60px;
      background: rgba(#016CE4, 0);
      height: 3px;
    }
  }

  .tabsinner.active {

    .line {
      background: #016CE4;
    }
  }
}