クリックイベントでタブの切り替えがしたい

Question

お世話になっております。

現在、メルカリのクローンサイトを作成しております。

マイページ内のお知らせとやることリストにクリックイベントを発生させて、タブの切り替えをし、切り替えた内容を表示させたいです。

実現したいこと

showクラスで表示される内容が変わる。

タブをクリックしたらクリックした箇所が白くなり切り替えは実現できています。
しかし、showの内容が反映されません。

container-bodyのscssは途中です。

mypage.scss

//省略
    .container-tab-notofication-todo {
      .container-tabs {
        display: flex;
        text-align: center;
        cursor: pointer;
        &__item {
          width: 50%;
          font-size: 17px;
          padding: 20px 60px;
          display: inline-block;
          background-color: #eee;
          }
        .active {
          background-color: white;
          display: inline-block;
          }
          h3 {
            font-weight: bold;
          }
        }
      }
      .container-body {
        width: 100%;
        &__item {
          display: inline-block;
        }
        .show {
          display: inline-block;
        }
      }

mypage.js

$(function() {
  let tabs = $(".container-tabs__item");
  tabsAry = Array.prototype.slice.call(tabs);
    function tabSwitch() {
      $(".active").removeClass("active");
      $(this).addClass("active");
      const index = tabs.index(this);
      $(".container-body__item").removeClass("show").eq(index).addClass("show");
    }
    tabs.click(tabSwitch);  
});

mypage.html.haml

//省略
    .container-tab-notofication-todo
      %ul.container-tabs
        %li.container-tabs__item.active
          %h3 お知らせ
        %li.container-tabs__item
          %h3 やることリスト
      %ul.container-body
        %li.container-body__item.show
          %p お知らせはありません
        %li.container-body__item
          %p やることはありません

よろしくお願い致します。

Answer 1

scssでshowクラスがついていないものはdisplay: none;、ついているものはdisplay: block;を付与すれば解決できました。