Tab

                              
<div id="wrap">
  <div class="tabWrap">
      <div class="tabNav">
          <ul class="tabList">
              <li class="active">Tab1</li>
              <li>Tab2</li>
          </ul>
      </div>
      <div class="tabCont active">
        <p>contents 1</p>
      </div>
      <div class="tabCont">
        <p>contents 2</p>
      </div>
</div>

                              
.tabWrap{
    .tabCont{display: none;
        &.active{display: block;}
    }
    .tabNav .tabList{display: flex;}
      >.tabNav{
          >.tabList{display: flex;border: 1px solid #ddd; border-radius: 4px; font-size: 16px; color: #222;
              >li{position: relative; flex: 1; height: 50px; line-height: 50px; padding: 0 10px; cursor: pointer; 
              box-sizing: border-box; text-align: center; background-color: #fff; font-family: 'Noto sans';
                  &.active{border-radius: 4px 0 0 4px; font-weight: bold;color: #fff;background-color: #266bf7;
                      &:last-child{border-radius: 0 4px 4px 0;}
                  }
              }
          }
      }
}

                              
.tabWrap .tabCont {
    display: none;
}

.tabWrap .tabCont.active {
    display: block;
}

.tabWrap .tabNav .tabList {
    display: flex;
}

.tabWrap > .tabNav > .tabList {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    color: #222;
}

.tabWrap > .tabNav > .tabList > li {
    position: relative;
    flex: 1;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
    font-family: 'Noto sans';
}

.tabWrap > .tabNav > .tabList > li.active {
    border-radius: 4px 0 0 4px;
    font-weight: bold;
    color: #fff;
    background-color: #266bf7;
}

.tabWrap > .tabNav > .tabList > li.active:last-child {
    border-radius: 0 4px 4px 0;
}

                              
$(function(){
  $('.tabList li').on({
    "click":function(){
      $(this).addClass('active').siblings('li').removeClass('active');
      $(this).closest('.tabNav').siblings('.tabCont').eq($(this).index()).addClass('active').siblings('.tabCont').removeClass('active');
    }
  })
});

Result

Tab1
Tab2

contents 1

contents 2