[jQuery]別ページから特定のタブにダイレクトリンクする方法

jQueryを使うと簡単にタブを実装することができます。しかし、ただタブを作るだけではなく、他ページから任意のタブにアクセスしたい・・・なんて事はありませんか？
例えばタブが3つ並んでいる場合に、他ページから遷移して2番目のタブをアクティブにしたい・・・等。
今回は、jQueryを使用して特定のタブにダイレクトリンクする方法をまとめてみました。

[jQuery]別ページから特定のタブにダイレクトリンクする方法 [サンプル]

ここではリンク元ページをtab.html、タブページをtab2.htmlとしています。
tab.htmlにあるhrefの「#」以下を取得して、リンクに応じたタブを表示させる方法を記述します。

デモページはこちらです。

2016/04/07[追記]：ダイレクトリンクではなく、特定のタブをアクティブにするだけが良い場合はこちらの記事をご参考までに。

• [jQuery]パラメータを利用して別ページから特定のタブをアクティブにする方法

リンク元(tab.html)のHTML

リンク先(tab2.html)のHTML

リンク先(tab2.html)のCSS

CSSはデザインに基づいて記述して下さい。参考までに当サンプルのCSSはこちら。
[css] .tab_area{
overflow:hidden;
display:table;
margin:0;
}

.tab_area li{
/*Tabの装飾*/
width:139px;
height:49px;
text-align:center;
border-right: 1px dotted #909090;
cursor: pointer;
vertical-align:middle;
display:table-cell;
color:#333333;
background-color:#ffffff;
}

.all_area {
background:#efefef;
padding:10px;
overflow: hidden;
}

.all_area div.content_area{
/*Tabの内容を表示するエリアの装飾*/
background:#ffffff;
padding:10px 10px 10px 2px;
border-top: 1px dotted #bbbbbb;
}

.tab_area li.select{
/*アクティブタブの装飾*/
background-color:#ffffff;
background-image:none;
color:#333333;
border-top:2px solid #e94545;
}

.hide{display:none;}
[/css]

jQuery 通常のタブ

ダイレクトリンクを使用しない通常のタブは下記のように作成する事ができます。
[javascript] $(function() {
//クリックしたときのファンクションをまとめて指定
$(‘ul.tab_area li’).click(function() {
//.index()を使いクリックされたタブが何番目かを調べ、
// indexという変数に代入します。
var index = $(‘ul.tab_area li’).index(this);

//コンテンツを一度すべて非表示にし、
$(‘.content_area’).css(‘display’,’none’);

//クリックされたタブと同じ順番のコンテンツを表示します。
$(‘.content_area’).eq(index).fadeIn();

//タブについているクラスselectを消し、
$(‘.tab_area li’).removeClass(‘select’);

//クリックされたタブのみにクラスselectをつけます。
$(this).addClass(‘select’)
});
});
[/javascript] ここまででこんなタブができます。

jQuery ダイレクトリンク

他ページ、あるいはページ内リンクなどから特定のタブをアクティブにしたい場合は、下記の方法があります。
2015/05/05[追記]：sliceの部分でIEでエラーが発生するとのご連絡を頂き、一部修正しました。
2015/05/29[追記]:13行目の記述修正。hashに要素がない場合は1つ目のtabがアクティブになるように記述。
[javascript] //ダイレクトリンク
$(function() {
//location.hashで#以下を取得 変数hashに格納
var hash = location.hash;
//hashの中に#tab～が存在するか調べる。
hash = (hash.match(/^#tab\d+$/) || [])[0];

//hashに要素が存在する場合、hashで取得した文字列（#tab2,#tab3等）から#より後を取得(tab2,tab3)
　　　　if($(hash).length){
var tabname = hash.slice(1) ;
} else{
　　　　// 要素が存在しなければtabnameにtab1を代入する
　　　　var tabname = "tab1";}
//コンテンツを一度すべて非表示にし、
$(‘.content_area’).css(‘display’,’none’);

//一度タブについているクラスselectを消し、
$(‘.tab_area li’).removeClass(‘select’);

var tabno = $(‘ul.tab_area li#’ + tabname).index();

//クリックされたタブと同じ順番のコンテンツを表示します。
$(‘.content_area’).eq(tabno).fadeIn();

//クリックされたタブのみにクラスselectをつけます。
$(‘ul.tab_area li’).eq(tabno).addClass(‘select’)
});
[/javascript] 詳しく見ていきましょう。
4行目で変数hashにリンク先のurlのアンカーを取得しています。#tab1とか#tab2とか。
[javascript language=”jp”] var hash = location.hash;
[/javascript]

location.hash・・・URLの「#」以降を取得

6行目で、アンカーにtab～の文字が含まれているかチェック。無い場合は、hashに渡しません。
この部分Yahoo!知恵袋を参考にさせて頂きました。

• 他ページから指定したタブへダイレクトリンクする方法を探しています。 | Yahoo!知恵袋

続いて変数tabnameに6行目で取得したhashの#から後の文字を代入します。tab1とかtab2とかになります。
【20150505/追記】9行目のif文を追記しました。hashに要素が存在する場合は、#から後の文字をsliceします。
このif文が無いと、遷移前のページでエラーがでます。（当環境ではIE8以下のみ）
【20150529/追記】hashに要素がない場合は、1つ目のタブがアクティブになるように変数tabnameにtab1を代入しています。

slice・・・指定範囲のものを切り出す

20行目でリンク元URLとタブを紐づけています。
タブに指定したidがtabnameと一致するものを取得しています。
そして最後に一致しているタブの中身を表示させて、タブにselectクラスを付けてアクティブ状態にします。
動作確認をし、問題なければ完成です！

他にも方法はあるので、作成するコンテンツに合わせて検討してみて下さい！
以下に参考リンクをご紹介します。

• 他ページから指定したタブへダイレクトリンクする方法を探しています。 | Yahoo!知恵袋
  ベストアンサーに選ばれた解説がとても丁寧で分かりやすいです。
• URLの#アンカー名を使ってなにか動きを付ける場合location.hashを使う | のぶろぐ
  アコーディオンでの実装方法もありました。
• jQueryタブメニューにて、他ページからダイレクトリンクする方法について | Yahoo!知恵袋

躓いたら教えて貰おう！

コードエラーにはまるとあっという間に時間が経ちますよね。何が悪いのか見つけるもの一苦労。
フリーランスの人や社内に聞ける人がいない！ピンチ！な人は外部サービスを使ってみては如何でしょうか。今は便利なサービスが沢山ありますよ。
「ストアカ」は教える側・教えられる側にもなれるサービスです。大手セミナーサイトには載っていないレア先生がいるかも！？私は統計学のセミナーを受けたことがあるのですが、アットホームで生徒との距離が近く感じました。アットホームと言いつつも博士号を持った先生だったので、内容も満足！
単発受講可能なセミナーも多いので気になる講座があれば足を運んでみて下さい。

自宅学習派の人は「TechAcademy [テックアカデミー]」、「世界最大級のオンライン学習サイトUdemy」などのサービスから合うものを選んでみて下さい。
テックアカデミーはWordpressやアプリコースの他、WEBデザインコースもあります。
UdemyはWEBやPG系に限らず趣味的な講座もあります。また、Udemyは受講料のセール（？）があり、タイミングが合えばお目当ての講座を安く受けれるかも！？ストアカと同じく、講師側にも興味がある人は登録しとくといいですよ。夢の講師デビューはすぐそこっ！
社内の技術力を底上げしたいとお考えの企業には「企業向けプログラミング研修【CodeCamp】」という手もあります。
学び方も多様化していて便利ですねー。