タブレイアウトで、別のページから特定のタブへリンクしたい時に。
BootstrapやFoundationを導入して入れば実現するのは優しいですね。こういう時はCSSフレームワークはとても助かります。
Bootstrap4で特定のタブに直接リンクする

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 タブへのダイレクトリンク
Foundationで特定のタブへ直接リンクする

私は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タブへのダイレクトリンク
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;
});
});
});
以上、特定のタブに直接リンクする方法でした。
タブを実装する方法は下記の記事も参考になります。
-
-
レスポンシブなタブメニュー CSS&JS -Tab UI
決まったスペースにコンテンツを効率的にレイアウトしたいとき、タブインターフェイスが使われていることはよく有ります。 ニュースサイトではカテゴリーの新着ニュースを、ECサイトでは商品の説明や仕様をタブを ...
続きを見る