タブ

<div class="tab-group">
    <div class="tab-area">
        <div class="tab active">
            タブ１
        </div>
        <div class="tab">
            タブ２
        </div>
        <div class="tab">
            タブ３
        </div>
    </div>
    <div class="content-area">
        <div class="content show">
            タブ１コンテンツ
        </div>
        <div class="content">
            タブ２コンテンツ
        </div>
        <div class="content">
            タブ３コンテンツ
        </div>
    </div>
</div>

.tab-group {
    .tab-area {
        display: flex;

        .tab {
            align-items: center;
            border: 1px solid #000;
            color: #000;
            cursor: pointer;
            display: flex;
            justify-content: center;
        }

        .tab.active {
            background-color: #000;
            color: #fff;
        }
    }

    .content-area {
        .content {
            display: none;
        }

        .content.show {
            display: block;
        }
    }
}

$(function () {
  let tabs = $(".tab");
  $(".tab").on("click", function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    const index = tabs.index(this);
    $(".content").removeClass("show").eq(index).addClass("show");
  });
});