SOURCE

let list = document.querySelectorAll('.item');
let bar = document.querySelector('.bar');

for (let i = 0; i < list.length; i++) {

  list[i].addEventListener('click', function(){

    let that = this;
    let nextIdx = i; // 被点击的标签索引
    let onIdx = 0; // 当前的标签索引，默认0
    
    // 点击当前的标签不执行
    if (that.classList.contains('on')) {
      return false;
    }

    let onObj = document.querySelector('.on'); // 当前的标签对象

    // 获取当前的标签索引
    for (let i = 0; i < list.length; i++) {
      if (list[i] === onObj) {
        onIdx = i;
      }
    }

    // 判断动画的方向
    if (nextIdx > onIdx) {
      bar.classList.add('bar-head');
      bar.classList.remove('bar-tail');
    } else if (nextIdx < onIdx) {
      bar.classList.add('bar-tail');
      bar.classList.remove('bar-head');
    }
    
    // 标签底部条的属性
    switch (nextIdx) {
      case 0:
        bar.style.left = '0%';
        bar.style.right = '66.6667%';
        break;
      case 1:
        bar.style.left = '33.3333%';
        bar.style.right = '33.3333%';
        break;
      case 2:
        bar.style.left = '66.6667%';
        bar.style.right = '0';
        break;          
    }

    // 清除所有选中的class
    for (let i = 0; i < list.length; i++) {
      list[i].classList.remove('on');
    }
    
    // 设置选中标签的class
    that.classList.add('on');

  }, false);

}

<div class="list" id="J_list">
  <div class="item on">已发货</div>
  <div class="item">未发货</div>
  <div class="item">全部订单</div>
  <div class="bar bar-head"></div>
</div>

.list {
    margin: 0;
    padding: 0;
    position: relative;
  display: flex;
  width: 100%;
}
.item {
  flex-grow: 1;
  list-style: none;
  font-size: 3em;
  text-align: center;
}
.bar {
    position: absolute;
    bottom: -.5em;
    left: 0;
    right: 66.6667%;
    height: .5em;
    background-color: #f60;
}
.bar-head {
    transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
}
.bar-tail {
    transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
}