多容器切换样式

需要引入jquery才能实现点击切换样式的效果

html:

    <div class="nav-box">
            <div id="content" class="tab-box">
              <div class="tab tab1 ">
                <span>全部</span >
              </div>

              <div class="tab">
                <span>待付款</span>
              </div>
              <div class="tab">
                  <span>待发货</span>
              </div>

              <div class="tab">
                  <span>待收货</span>
              </div>

              <div class="tab">
                  <span>待评价</span>
              </div>
            </div>
        </div>

css:

 .tab {
    width: 1.5rem;
    height: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
}

 .tab span{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 2.5rem;
    height: 100%;
    color: #797979;
    font-family: PingFang-SC-Medium;
    font-size: 15px;
}
.tab1{
  width: 1.5rem;
  height: 100%;
  display: flex;
  justify-content:center;
  align-items: center;
  border-bottom: 0.1rem solid #fd4e5f;
}
.tab1 span{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 2.5rem;
    height: 100%;
    color: #797979;
    font-family: PingFang-SC-Medium;
    font-size: 15px;
}

js:

//核心代码
$(function () {
  $(".tab").click(function () {
    $(this).removeClass("tab");
    $(this).addClass("tab1");
    $(this).siblings().removeClass("tab1");
    $(this).siblings().addClass("tab");
  });
});