JSを使ったタブの切り替え

HTML

<div class=”tab__wrp flex-box”>

<div class=”tab active”>タイトル１</div>

<div class=”tab”>タイトル２</div>

</div>

<div class=”content-container”>

<div class=”list content show”>中身</div>

<div class=”list content”>中身</div>

</div>

css

.content {

display: none;

&.show {

display: block;

}

}

js

// タブの切り替え

$(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”);

});

});