タブ切り替えでタブを上下に二つ設置し、連動させる方法
こんにちは。カスミです。
さて以下のようなお悩みをお持ちですか？
タブ切り替えをjQueryで実装したけど、タブ部分を切り替え部分のページ上部とページ下部に二つ設置し、且つ同じ動きで連動してタブ切り替えできるようにしたい。
このような悩みを解決致します。
実装手順は以下の通りです。
※本記事の実装方法はjQueryを使うので、ライブラリをCDNなどでhead内に読み込んどきましょう。すでにある場合は大丈夫です。
実装サンプル
See the Pen タブ切り替え上下二つ設置 by Kohei (@kouk05) on CodePen.dark
まずはコードペンを使った実装サンプルをご覧ください。
上下のタブを押して頂くとコンテンツが切り替わり、且つ連動してタブも上下切り替わっているのがわかります。
コードの詳細については次章より説明致します。
タブ切り替え用のhtml・ＣＳＳを準備
<div id="TOP"></div>
<ul class="tab tab-top">
<li class="tablist active">タブ０１ボタン</li>
<li class="tablist">タブ０２ボタン</li>
<li class="tablist">タブ０３ボタン</li>
</ul>
<div class="tabcontents">
<div class="tabcontents-list">タブ０１内容内容内容内容内容内容内容内容</div>
<div class="tabcontents-list">タブ０２内容内容内容内容内容内容内容内容</div>
<div class="tabcontents-list">タブ０３内容内容内容内容内容内容内容内容</div>
</div>
<ul class="tab tab-botom">
<li data-url="#TOP" class="tablist">タブ０１ボタン</li>
<li data-url="#TOP" class="tablist">タブ０２ボタン</li>
<li data-url="#TOP" class="tablist">タブ０３ボタン</li>
</ul>
タブ切り替え用のhtmlを準備しましょう。上記はサンプルになります。
タブはulタグで囲ったものを上下に二つ用意。
切り替えコンテンツは、親タグで囲うようにリスト化しましょう。
サンプルはdivでやってますが、ulタグでもいいです。
ページトップに「ID=TOP」の空のdivタグを入れといてください。（次章で説明します。）
下部に設置しているタブのli要素には「data-url=”TOP”」をつけてください。
後は、任意でCSSを当て装飾しましょう。
jQueryで上下タブ切り替えのコードを記述
$(function() {
$('.tab>li').click(function() {
var num = $(this).parent().children('li').index(this);
$('.tab').each(function(){
$('>li',this).removeClass('active').eq(num).addClass('active');
});
$('.tabcontents-list').hide().eq(num).show();
}).first().click();
$('.tab-bottom>li').click(function() {
var speed = 400;
var href= $(this).attr("data-url");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
jQueryで上下タブ切り替えするコードです。
簡潔にコードの説明をすると以下になります。
何番目のタブをクリックしたかを変数「num」に格納。
タブをクリックしたら「eq()」を使ってliの何番目の要素にactiveクラスをつけるか処理。
切り替えコンテンツが変数numと同じインデックス番号の時、そのコンテンツを表示それ以外のコンテンツは非表示にする
最後に、ページ下部のタブをクリックしたら、ページトップへ戻る処理を書いてます。
前章でページトップに「ID=TOP」の空divを入れましたが、こちらの位置までスクロールして戻ります。
セレクタ部分を任意のクラスに書き換えて、コピペしてください。
以上で実装が完了です。
まとめ
下層ページがＬＰ並みに長い時、タブで分割して、切り替えて表示したら可読性が上がるかもしれません。
そんな時、役立つはずです。
以上で解説を終わります。