
webサイトでよく見るタブの切り替えが出来るコンテンツボックスの作り方を紹介したいと思います!
jqueryとcssでささっと出来ちゃうので試してみたください!
タブの切り替え機能を実装する方法
<div class="wrap">
<ul id="tab-list" class="list">
<li class="item active"><span>タブ1</span></li>
<li class="item"><span>タブ2</span></li>
<li class="item"><span>タブ3</span></li>
</ul>
<div class="content active-content">
<p>ここにコンテンツ内容が入ります1</p>
</div>
<div class="content">
<p>ここにコンテンツ内容が入ります2</p>
</div>
<div class="content">
<p>ここにコンテンツ内容が入ります3</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等)を付与してあげることが必要となります。
参考になれば幸いです。