WEB Tips デザイン・コーディング

特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]

2019-08-09

本記事にはプロモーションが含まれています。

特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営｜2008年からGmail使用中｜WordPress制作10年以上｜15社以上のレンタルサーバー利用経験｜100件以上のドメイン取得運用｜サイト・ドメイン移転多数 »  もっとくわしく

タブレイアウトで、別のページから特定のタブへリンクしたい時に。

BootstrapやFoundationを導入して入れば実現するのは優しいですね。こういう時はCSSフレームワークはとても助かります。

Bootstrap4で特定のタブに直接リンクする

https://getbootstrap.com/

BootstrapのTabは .nav-tabs というclassで実現します。tab用javascriptプラグインが必須です。（コンパイル済みのbootstrap.jsでOK）

Bootstrapのタブドキュメントは以下のページ
https://getbootstrap.com/docs/4.3/components/navs/#tabs

Bootstrapのnav-tabsクラスを使ったタブレイアウト サンプルHTML

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
	<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
	<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
	<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  	<p>Tab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツ</p></div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Tab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツ</div>
</div>

jQueryとBootstrap4を読み込みます（CDNの場合）

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>

tabの記述

// #(ハッシュ)指定されたタブを表示する
var hash = document.location.hash;

if (hash) {
		$('.nav-tabs a[href="' + hash + '"]').tab('show');
	}
	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
	  e.target // newly activated tab
	  e.relatedTarget // previous active tab
	});
});

デモ:Bootstrap タブへのダイレクトリンク

以下のリンクをクリックすると、特定のBootstrapタブが開きます。

Bootstrap タブレイアウトDEMO

Foundationで特定のタブへ直接リンクする

https://foundation.zurb.com

私はBootstrapよりFoundationをよく利用します。SCSSやGulpなど開発環境が用意されていて導入しやすいフレームワークです。

現在の最新バージョンはFoundation6です。（2019年8月）Foundation6でもTabに関する機能が色々用意されています。

data-deep-linkオプションを追加することで#つきURLでリンクできるようになります。

Foundation:Tabs and URLs
https://foundation.zurb.com/sites/docs/tabs.html#tabs-and-urls

FoundationタブレイアウトのサンプルHTML

HTML

<ul class="tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" data-tabs id="deeplinked-tabs">
  <li class="tabs-title is-active">
    <a href="#home" aria-selected="true">Home</a>
  </li>
  <li class="tabs-title">
    <a href="#profile" aria-selected="true">Profile</a>
  </li>
  <li class="tabs-title">
    <a href="#contact">Contact</a>
  </li>
</ul>
<div class="tabs-content" data-tabs-content="deeplinked-tabs">
  <div class="tabs-panel is-active" id="home">
  	<p>Tab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツTab1 コンテンツ</p>
	</div>
  <div class="tabs-panel" id="profile">
    Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.Tab2 コンテンツ.</div>
  <div class="tabs-panel" id="contact">
    <p>Tab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツTab3 コンテンツ</p>
  </div>
</div>

jQueryとfoundationのjsファイルを読み込みます。

<script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/what-input/dist/what-input.min.js"></script>
    <script src="node_modules/foundation-sites/dist/js/foundation.min.js"></script>
    <script src="js/app.js"></script>

what-inputはマウス、キーボード、またはタッチなどのイベントを判定してくれるJSライブラリです。

Foundationの場合は、タブナビゲーションに「data-deep-link="true"」要素、タブコンテンツのラッパーに「data-tabs-content="deeplinked-tabs"」要素を追加しました。

タブコンテンツがページの下の方にあっても、ダイレクトリンクした時には該当のタブまで移動します。（Awesome!）

Foundationタブへのダイレクトリンク

以下のリンクをクリックすると、デモページの特定のタブが開きます。

FoundationタブレイアウトのDEMO

jQueryで特定のタブにリンクする

CSSフレームワークを使わず、jQueryでタブUIを作成して特定のタブにリンクするサンプルです。

HTMLは以下の通り

      <ul class="tab-menu">
        <li class="active"><a href="#tab1">タブ1</a></li>
        <li><a href="#tab2">タブ2</a></li>
        <li><a href="#tab3">タブ3</a></li>
        <li><a href="#tab4">タブ4</a></li>
        <li><a href="#tab5">タブ5</a></li>
        <li><a href="#tab6">タブ6</a></li>
      </ul>
      <div class="tab-content active" id="tab1">
        <p>タブ1のコンテンツ</p>
      </div>
      <div class="tab-content" id="tab2">
        <p>タブ2のコンテンツ</p>
      </div>
      <div class="tab-content" id="tab3">
        <p>タブ3のコンテンツ</p>
      </div>
      <div class="tab-content" id="tab4">
        <p>タブ4のコンテンツ</p>
      </div>
      <div class="tab-content" id="tab5">
        <p>タブ5のコンテンツ</p>
      </div>
      <div class="tab-content" id="tab6">
        <p>タブ6のコンテンツ</p>
      </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	// URLのハッシュを取得
	var hash = window.location.hash;

	// ハッシュが空でない場合、該当するタブをアクティブにする
	if (hash !== '') {
		$('.tab-menu li').removeClass('active');
		$('a[href="' + hash + '"]').parent().addClass('active');
		$('.tab-content').removeClass('active');
		$(hash).addClass('active');

		// ウィンドウのスクロール位置を調整
		var tabMenuHeight = $('.tab-menu').outerHeight();
		var targetOffset = $(hash).offset().top;
		var adjustedOffset = targetOffset - tabMenuHeight;
		$('html, body').scrollTop(adjustedOffset);
	}

	// タブがクリックされたらコンテンツを表示
	$('.tab-menu a').on('click', function(e) {
		e.preventDefault();
		$('.tab-menu li').removeClass('active');
		$(this).parent().addClass('active');
		var target = $(this).attr('href');
		$('.tab-content').removeClass('active');
			$(target).addClass('active');     
	});
});
</script>
jQuery製タブUI デモ

jQuery製タブUIへのダイレクトリンク

以下のリンクをクリックすると、デモページの特定のタブが開きます。

以上、特定のタブに直接リンクする方法でした。

タブを実装する方法は下記の記事も参考になります。

サイト制作に役立つかもしれないTips

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営｜2008年からGmail使用中｜WordPress制作10年以上｜15社以上のレンタルサーバー利用経験｜100件以上のドメイン取得運用｜サイト・ドメイン移転多数 »  もっとくわしく

-WEB Tips, デザイン・コーディング
-,