Written by Kasumi

タブ切り替えでタブを上下に二つ設置し、連動させる方法

こんにちは。カスミです。

さて以下のようなお悩みをお持ちですか?

タブ切り替えをjQueryで実装したけど、タブ部分を切り替え部分のページ上部とページ下部に二つ設置し、且つ同じ動きで連動してタブ切り替えできるようにしたい。

このような悩みを解決致します。

実装手順は以下の通りです。

※本記事の実装方法はjQueryを使うので、ライブラリをCDNなどでhead内に読み込んどきましょう。すでにある場合は大丈夫です。

実装サンプル

See the Pen タブ切り替え上下二つ設置 by Kohei (@kouk05) on CodePen.dark

まずはコードペンを使った実装サンプルをご覧ください。

上下のタブを押して頂くとコンテンツが切り替わり、且つ連動してタブも上下切り替わっているのがわかります。

コードの詳細については次章より説明致します。

タブ切り替え用のhtml・CSSを準備

<div id="TOP"></div>

<ul class="tab tab-top">
  <li class="tablist active">タブ01ボタン</li>
  <li class="tablist">タブ02ボタン</li>
  <li class="tablist">タブ03ボタン</li>
</ul>

<div class="tabcontents">
  <div class="tabcontents-list">タブ01内容内容内容内容内容内容内容内容</div>
    <div class="tabcontents-list">タブ02内容内容内容内容内容内容内容内容</div>
    <div class="tabcontents-list">タブ03内容内容内容内容内容内容内容内容</div>
</div>

<ul class="tab tab-botom">
  <li data-url="#TOP" class="tablist">タブ01ボタン</li>
  <li data-url="#TOP" class="tablist">タブ02ボタン</li>
  <li data-url="#TOP" class="tablist">タブ03ボタン</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を入れましたが、こちらの位置までスクロールして戻ります。

セレクタ部分を任意のクラスに書き換えて、コピペしてください。

以上で実装が完了です。

まとめ

下層ページがLP並みに長い時、タブで分割して、切り替えて表示したら可読性が上がるかもしれません。

そんな時、役立つはずです。

以上で解説を終わります。

目次

関連記事

HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
2045
jQuery

jQueryを使ってURLにアンカーを残さず、ページ内リンクさせる方法

更新日:2022.09.09
789
jQuery

固定ヘッダーでアンカーリンクがずれる・隠れる場合の対処方法 【スムーズスクロール対応】

更新日:2022.09.09
1542
jQuery

【簡単コピペ】CSSとjQueryを使ってハンバーガーメニューを実装しよう

更新日:2022.09.09
623