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

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

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

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
	});
});

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

• Home
• Profile
• Contact

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

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タブへのダイレクトリンク

• Home
• Profile
• Contact

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

フレームワークを使わないで特定タブへリンクする。

参考: JavaScriptでURLのパラメータやアンカーを判断して処理を変更する方法

<ul class="tabs-nav">
	<li><a href="#tab1" class="active">Tab1</a></li>
	<li><a href="#tab2">Tab2</a></li>
	<li><a href="#tab3">Tab3</a></li>
	<li><a href="#tab4">Tab4</a></li>
</ul>
<div class="tab-content" id="tab1">
	Tab1 コンテンツ
</div>
<div class="tab-content" id="tab2">
	Tab2 コンテンツ
</div>
<div class="tab-content" id="tab3">
	Tab3 コンテンツ
</div>
<div class="tab-content" id="tab4">
	Tab4 コンテンツ
</div>
</div>

$(function () {
  var hash = location.hash;

  $(window).load(function() {
    if(hash){
      var target = $('.tabs-nav li a[href$="' + hash + '"]');

      if(target.length > 0){
        $('.tabs-nav li a').removeClass('active');
        target.addClass('active');
      }
    }

    // タブ切替
    $('.tab-content:not('+$('.tabs-nav li a.active').attr('href')+')').hide();
    $('.tabs-nav li a').click(function(){
      $('.tabs-nav li a').removeClass('active');
      $(this).addClass('active');
      $('.tab-content').hide();
      $($(this).attr('href')).fadeIn();
      return false;
    });
  });
});

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

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