多容器切换样式

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/hu_Time/article/details/100895073

需要引入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");
  });
});