クリックイベントでタブの切り替えをするときにハマったこと

背景

クリックしたときにタブの切り替えはできたが、肝心な内容がもともと両方とも表示されてしまっている
タブの切り替えだけ反映されても意味がないのだ...。💧

仮説

jqueryの記述に問題があると仮説を立てた。

実装開始

調べてみると、show、hide、toggleというものを見つけた。

でも、よくよく考えてみるとこれらはクリックしたときに起こるイベントだから意味ないような...。

ということで、もっと調べてみると、cssのdisplay:none;と言うものを発見。

      %ul.container-body
        %li.container-body__item.show
          %p お知らせはありません
        %li.container-body__item
          %p やることはありません

      .container-body {
        width: 100%;
        &__item {
          display: none;
        }
        .show {
          display: block;
        }

こんな感じで、showになっている箇所はdisplay: block;で表示させ、隠したい箇所(showではない所)はdisplay: none;を付与してあげることで実現することができた。