webサイトでよく見るタブの切り替えが出来るコンテンツボックスの作り方を紹介したいと思います！
jqueryとcssでささっと出来ちゃうので試してみたください！
タブの切り替え機能を実装する方法
<div class="wrap">
<ul id="tab-list" class="list">
<li class="item active"><span>タブ１</span></li>
<li class="item"><span>タブ２</span></li>
<li class="item"><span>タブ３</span></li>
</ul>
<div class="content active-content">
<p>ここにコンテンツ内容が入ります１</p>
</div>
<div class="content">
<p>ここにコンテンツ内容が入ります２</p>
</div>
<div class="content">
<p>ここにコンテンツ内容が入ります３</p>
</div>
</div>タブの数を増やしたい場合もコピペでOKです！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('.item').click(function(){
$('.item').removeClass('active');
$(this).hasClass('active');
$('.content').removeClass('active-content');
var index = $(this).index();
$('.content').eq(index).addClass('active-content');
$('.item').eq(index).addClass('active');
});
});
</script>上記はjqueryですが、わかりやすく
言語化してみたので参考にどうぞ▼
※何か違う点ありましたらご指摘くださいませ。
ーーーーーーーーここからーーーーーーーーーーーーーーーー
＊タブ（item）をクリックされたら、
┗タブから既についているactiveクラスを外す。（removeClass）
┗タブにactiveクラスがついているか探す。（hasClass）
┗コンテンツ(content)から既についているactive-contentクラスを外す
┗クリックされた要素の番号をindexへ格納する
┗indexに格納された番号のコンテンツにactive-contentクラスを付与する
┗タブも上記同様にactiveクラスを付与
.wrap {
max-width: 1000px;
margin: 0 auto;
}
ul#tab-list {
display: flex;
justify-content: center;
/* border: 1px solid #333; */
/* padding: 20px 0; */
margin: 100px 0 0;
}
ul#tab-list:last-of-type {
margin-left:none;
}
li.item {
padding: 20px 40px;
border: 1px solid #33333324;
cursor: pointer;
border-bottom: none;
margin-left:10px;
}
li.item:last-of-type {
margin-left:none;
}
li.item.active,
.active-content {
background: #8FC31F;
color: #fff;
}
.content {
width: 1000px;
padding: 100px 40px;
display: none;
box-shadow: 5px 6px 8px 0px #3333335c;}
@media screen and (max-width: 767px) {
li.item {
padding: 6.25vw 3vw;
font-size: 13px;
}
.content{padding: 13vw 3vw;
margin: 0 5%;}
}
.active-content {
display: block;
}index()の付け忘れに注意
上記で言語化した通り、index()でクリックした要素の番号を取得し、
別のクラス（※active等）を付与してあげることが必要となります。
参考になれば幸いです。