今回はページを遷移せず、jQueryでタブの切り替えを行う実装を紹介します！
まずはデモページでこれから作るものを確認します。
【切り替えタブの作り方】HTML編
<ul class="tab">
<li class="active">洋画</li>
<li>邦画</li>
<li>海外ドラマ</li>
<li>国内ドラマ</li>
</ul>
<div class="content">
<ul class="show">
<li>ハリーポッター</li>
<li>スパイダーマン</li>
<li>マトリックス</li>
</ul>
<ul>
<li>ALWAYS 三丁目の夕日</li>
<li>舟を編む</li>
<li>永遠の0</li>
</ul>
<ul>
<li>ウォーキング・デッド</li>
<li>ゴシップガール</li>
<li>スーツ</li>
</ul>
<ul>
<li>タラレバ娘</li>
<li>トリック</li>
<li>花より男子</li>
</ul>
</div>解説です。（わかる人は読み飛ばしOK）
<ul class="tab">まず1行目〜6行目までの<ul class=”tab”>〜</ul>で囲まれている部分が切り替えタブのタブの部分です。
<li class="active">洋画</li>タブをクリックするとactiveクラスが付与され、コンテンツが切り替わります。
<div class="content">7行目〜28行目までが切り替えで表示させたいコンテンツ部分になります。
<ul class="show">デフォルトでコンテンツ部分は非表示に設定してあります。そこでshowクラスが付与されるとコンテンツが表示される仕組みです。
【切り替えタブの作り方】CSS編
.tab{
border-bottom: 3px solid #d5c5a5;
display: flex;
justify-content: space-around;
padding:0;
}
.tab li{
width:calc(100%/4);
color: #333;
list-style: none;
text-align: center;
padding:5px 0;
border-right: 1px solid #eee;
cursor: pointer;
transition: .3s;
}
.tab li.active{
color: #fff;
background-color: #d5c5a5;
cursor: pointer;
}
.content ul{
display: none;
}
.content ul.show{
display: block;
}解説です。（わかる人は読み飛ばしOK）
.tab li.active切り替えタブでコンテンツが表示されている時のタブのデザイン。
.content uldisplay:none;にして全コンテンツ部分を非表示にします。
.content ul.show反対にshowクラスがついたコンテンツは表示にしたいので、display:block;を設定します。
【切り替えタブの作り方】jQuery編
$(function(){
$('.tab li').click(function(){
var index= $('.tab li').index(this);
$('.tab li').removeClass('active');
$(this).addClass('active');
$('.content ul').removeClass('show').eq(index).addClass('show');
});
});解説です。（わかる人は読み飛ばしOK）
$('.tab li').click(function(){タブをクリックしたら実行する
var index= $('.tab li').index(this);クリックされたタブの順番を変数に格納する
$('.tab li').removeClass('active');クリック済みのタブのデザインを設定したcssのクラスを一旦削除
$(this).addClass('active')クリックされたタブにクリック済みデザインを適用する
$('.content ul').removeClass('show').eq(index).addClass('show');コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみ表示
これで切り替えタブの完成です。
jQueryを使うのでCDNを読み込み忘れないようご注意ください。
