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

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

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

タブ切り替えを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並みに長い時、タブで分割して、切り替えて表示したら可読性が上がるかもしれません。

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

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

Ads

関連記事

HTMLCSS JavaScript プログラミング

【簡単】slickを使って次のスライドをチラ見せさせる方法【CSS・jQuery】

2022.02.09
287
WordPress プログラミング

コンタクトフォーム7でフォーム送信後、完了ページへ遷移させる方法

2019.12.02
92
WordPress プログラミング

【簡単】カスタム投稿のタクソノミーページでパーマリンクからタクソノミー名を削除し、ターム名のみにする方法

2022.01.30
327
PHP プログラミング

phpを使ってサイトのドメインを取得し、URLを出力する方法。

2021.06.14
287