jQuery:タブ切り替えをウィンドウサイズが小さいときはselectで切り替える動きにする方法

  • Posted on
  • Category : Tips
jQuery:タブ切り替えをウィンドウサイズが小さいときはselectで切り替える動きにする方法

レスポンシブなサイトでタブ切り替えを実装する際、ウィンドウサイズが大きいときは一般的な切り替え用のタブを表示して、小さいときは切り替えに`select`要素を用いるという動きを実装することがあったので備忘録です。

レスポンシブサイトでタブ切り替えを実装する際、ウィンドウサイズが大きい場合はそのままタブ切り替えの見栄えで、ウィンドウサイズが小さくなったときには表示幅などの兼ね合いで違った見せ方にすることがあります。
そのような時に見かけるのが多いものとしては、ウィンドウサイズが小さいときはタブ切り替えではなくアコーディオンに変化させたり、他にはSmartNewsなどで採用されているようなタブの見栄えはそのままにしつつタブ部分をスワイプ(スクロール)できるようにしたものなどありますが、それらとは違った見せ方としてウィンドウサイズが小さいときは切り替えにselect要素を用いるという動きを実装することがあったので、実装方法を備忘録兼ねて紹介します。

先に動きを説明すると、表示・非表示の切り替えは単純にCSSのMedia Queriesを用いて、jQueryではそれぞれのナビが切り替わったタイミングでもう一方のナビにもそれを反映しているというものになります。

HTML

まず、サンプルソースとしてHTMLは以下のようなものを使用します。

HTML

<div class="tabs">
	<div class="tab-button-outer">
		<ul id="tab-button">
			<li><a href="#tab01">Tab 1</a></li>
			<li><a href="#tab02">Tab 2</a></li>
			<li><a href="#tab03">Tab 3</a></li>
			<li><a href="#tab04">Tab 4</a></li>
			<li><a href="#tab05">Tab 5</a></li>
		</ul>
	</div>
	<div class="tab-select-outer">
		表示選択:
		<select id="tab-select">
			<option value="#tab01">Tab 1</option>
			<option value="#tab02">Tab 2</option>
			<option value="#tab03">Tab 3</option>
			<option value="#tab04">Tab 4</option>
			<option value="#tab05">Tab 5</option>
		</select>
	</div>

	<div id="tab01" class="tab-contents">
		<h2>Tab 1</h2>
		<p>Lorem ipsum dolor sit amet ...</p>
	</div>
	<div id="tab02" class="tab-contents">
		<h2>Tab 2</h2>
		<p>Lorem ipsum dolor sit amet ...</p>
	</div>
	<div id="tab03" class="tab-contents">
		<h2>Tab 3</h2>
		<p>Lorem ipsum dolor sit amet ...</p>
	</div>
	<div id="tab04" class="tab-contents">
		<h2>Tab 4</h2>
		<p>Lorem ipsum dolor sit amet ...</p>
	</div>
	<div id="tab05" class="tab-contents">
		<h2>Tab 5</h2>
		<p>Lorem ipsum dolor sit amet ...</p>
	</div>
</div>

ソース上部にあるul id="tab-button"はウィンドウサイズが大きい際に使用するタブ(以下:ボタンナビ)で、その下にあるselect id="tab-select"はウィンドウサイズが小さい際にタブの代わりとなるselect要素(以下:セレクトナビ)となります。
「表示選択:」というのはただselect要素が設置されているだけではわかりにくいと思ったため補足的な意味で記述しているので、デザインでわかりやすくしているなど表示する必要がなければ削除してください。

ソース下部にある.tab-contentsが指定されたdiv要素はボタンナビまたはセレクトナビが変更されたのに応じて切り替わるコンテンツ部分となり、ここにはそれぞれユニークなIDを指定しておきます。
今回のサンプルではtab01, tab02, tab03 … とわかりやすく連番指定しておき、ここに記述したIDはソース上部にあるhrefvalueにも記述しておく必要があります。
具体的に記述する箇所としてはボタンナビ内にあるa要素のhrefとセレクトナビ内にあるoption要素のvalueになります。

CSS

CSSといっても実装する上で最低限必要なスタイルは以下のように表示・非表示を切り替えるスタイルだけで、これをメディアクエリを用いてdisplayで表示を切り替えます。
なので、これぐらいであればいっそのことwindow.matchMediaを使うなどして、この動きもJavaScriptで対応してしまうのでも良いと思います。

今回はサンプルとして表示切り替えの基準を640pxとし、ウィンドウサイズが小さい場合(ウィンドウサイズが640px以下の場合)はボタンナビを非表示にしセレクトナビのみが表示されるようにしておき、ウィンドウサイズが大きい場合(ウィンドウサイズが640px以上の場合)にはボタンナビを表示にしてセレクトナビは非表示になるようにしています。

CSS

.tab-button-outer {
	display: none;
}

@media screen and (min-width: 640px) {
	.tab-button-outer {
		display: block;
	}
	.tab-select-outer {
		display: none;
	}
}

上記サンプルソースではスタイル指定などの融通が効くのでそれぞれ親要素を設けてそれを表示・非表示切り替えていますが、必要なければ直接#tab-button#tab-selectを指定する形にして、HTMLもそれに併せて必要ない箇所を削除したり変更しても問題ないです。

jQuery

jQuery

$(document).ready(function() {
	var $tabButtonItem = $('#tab-button li'),
	    $tabSelect = $('#tab-select'),
	    $tabContents = $('.tab-contents'),
	    activeClass = 'is-active';

	$tabButtonItem.first().addClass(activeClass);
	$tabContents.not(':first').hide();

	// button
	$tabButtonItem.find('a').on('click', function(e) {
		var target = $(this).attr('href');

		$tabButtonItem.removeClass(activeClass);
		$(this).parent().addClass(activeClass);
		$tabSelect.val(target);
		$tabContents.hide();
		$(target).show();
		e.preventDefault();
	});

	// select
	$tabSelect.on('change', function() {
		var target = $(this).val(),
		    targetSelectNum = $(this).prop('selectedIndex');

		$tabButtonItem.removeClass(activeClass);
		$tabButtonItem.eq(targetSelectNum).addClass(activeClass);
		$tabContents.hide();
		$(target).show();
	});
});

簡単にですが動きを説明すると、まず初期設定としてボタンナビの最初の要素(今回のサンプルではli)に選択されていることを表すクラスを付加し、次にそれぞれのナビが変更されたのに応じて切り替わるコンテンツ部分で最初のコンテンツ以外を非表示にしておきます。

次に選択したものによってコンテンツを切り替える動きの実装で、ボタンナビに関してはよくあるタブ切り替えと同じで、クリックされたa要素に指定されているhrefを取得し、それを利用して切り替わるコンテンツ部分の表示を変更しますが、その際にセレクトナビのvalue値も一緒に変更するようにしておきます。
こうすることでウィンドウサイズが大きいときの表示はボタンナビのみとなっていますが、見えないセレクトナビの方も変更されるようになります。

もうひとつのセレクトナビについても基本的にやっていることはボタンナビと同じで、select要素が変化したらvalue値を取得し、それを利用して切り替わるコンテンツ部分の表示を変更されるようにしています。
ボタンナビと違う部分としては、セレクトナビでは変更された値を取得する他にインデックスを取得していて、そのインデックスを利用してボタンナビの見栄えの際に現在選択されているものにクラスが付加されるようにしています。

ボタンナビの最初の要素にクラスを付加する部分やセレクトナビでインデックスを取得したりする動きは、これを利用することでCSSで選択中のボタンナビのスタイル変更などが容易にできるために付けているものになります。
なので、もしそういったものが必要ないのであればクラスの削除と付与に関する記述は必要はありません。

あとは、ボタンナビとセレクトナビの見栄えを整えるなどすれば完成となります。
実際の動きについては以下デモで確認できるので、それぞれのナビを変えたりウィンドウサイズを変化したりしてみてください。

以上、jQueryを使ってタブ切り替えのナビをウィンドウサイズが小さいときはselect要素に切り替える動きの実装方法でした。
全体的にもう少しスマートにしたり、特にセレクトナビでインデックスを取得してボタンナビにクラス付与してる部分はやり方変えてもっと厳密な感じにした方が好ましいんでしょうが、ひとまず上で紹介してきた方法で目的の動きは実装することができるので、同じようなことをやりたい場合は試してみてください。

Back to Top

jQuery:タブ切り替えをウィンドウサイズが小さいときはselectで切り替える動きにする方法

jQuery:タブ切り替えをウィンドウサイズが小さいときはselectで切り替える動きにする方法

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。