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

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

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

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

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

リンク元(tab.html)のHTML

[html] <ul>
<li><a href="tab2.html#tab1">このリンクはTab1に飛びます。</a></li>
<li><a href="tab2.html#tab2">このリンクはTab2に飛びます。</a></li>
<li><a href="tab2.html#tab3">このリンクはTab3に飛びます。</a></li>
</ul>
[/html]

リンク先(tab2.html)のHTML

[html] <div class="all_area">
<ul class="tab_area">
<li id="tab1" class="select">Tab1</li>
<li id="tab2">Tab2</li>
<li id="tab3">Tab3</li>
</ul>
<!– tab1 start –>
<div class="content_area">
<ul class="list_area">
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
</ul>
<!– /tab1 end –>
</div>
<!– tab2 start –>
<div class="content_area hide">
<p>これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。</p>
<!– /tab2 end –>
</div>
<!– tab3 start –>
<div class="content_area hide">
<p>これはTab3の内容です<br>
<img src="tabsample.gif" width="300" height="150">
</p>
<!– /tab3 end –>
</div>
<!– /tab area end –>
</div>
[/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] ここまででこんなタブができます。

  • Tab1
  • Tab2
  • Tab3
  • これはTab1の内容です
  • これはTab1の内容です
  • これはTab1の内容です
  • これはTab1の内容です

これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。

これはTab3の内容です
Free Repeat Patterns

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!知恵袋を参考にさせて頂きました。

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

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

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

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

躓いたら教えて貰おう!

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

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


11 Comments

森下

初めまして。こちらのタブの動作・デザイン共に気に入って是非使わせていただきたいのですが、一つ、お伺いしたいことがあります。

任意のタブにリンクを貼って遷移した場合、
例えば、#tab2を選んでリンクすると、
ページ内アンカーとしても動作してしまいます。

タブの切替のみに動いて欲しいのですが、
何か方法がありますでしょうか・・・?

返信する
いろはクロス

森下様
コメントありがとうございます。
すいません、どのようなものを作ろうとされているのかよく分からないのですが・・・ダイレクトリンクは不要という事でしょうか。
でしたら、記事中「jQuery 通常のタブ」に記載の方法でダイレクトリンクは無いタブを作成することができます。

>ページ内アンカーとしても動作してしまいます
→「ダイレクトリンク」版はそのような意図で作成しております。他ページから遷移した際に、該当のタブの箇所まで「ダイレクトにリンク」する方法ですので・・。

返信する
森下

いろはクロス様

早々のご返信ありがとうございます!
私はダイレクトリンクは、任意のタブを開いた状態にしたページにリンクできる、という意味だと思ってました!
はじめの段階で違っていましたね^^;
申し訳ありません。

私がやりたいのは、任意のタブを開き、しかし位置はページトップから開きたいので、アンカー機能はないほうがありがたいのですが
こちらのスクリプトではそういう実装は出来ないでしょうか・・・・?

返信する
いろはクロス

森下様

そうだったのですね、こちらの説明不足すいません;;
本コードはアンカーが非常に重要で、アンカーを外すとタブも機能しなくなってしまいます。お役に立てず申し訳ないです。。。

返信する
森下

色はクロス様

こちらこそ、申し訳ありません。
ご返信、ありがとうございました!

森下

いろはクロス様

名前が変な変換になってしまいました…
重ね重ねすみません!

この度はご丁寧な返信をいただきまして
本当にありがとうございました!

happy_sunny

はじめまして。
とても便利で理想的なタブのため、活用させていただいています。

「ダイレクトリンク」用を使用しているのですが、
ページをアクセスした際のデフォルトが、
tab1~3の場合、tab3が表示されるのですが、
tab1(1番目)を表示させることは可能なのでしょうか。

返信する
いろはクロス

happy_sunny様

コメント&ご指摘ありがとうございます!
1つ目のタブがアクティブになるように修正しました。

ソースの13行目、「hashに要素がなければ初期化」としていましたが、1つ目のtabがアクティブになるように、「 要素が存在しなければtabnameにtab1を代入する」としました。

var tabname = “tab1”;

これで1つ目のタブが表示されると思います!

返信する
sudo

はじめまして。とても便利そうなので、ぜひ実装してみたいと思ったのですが、ie10以下で「未定義または NULL 参照のプロパティ’slice’は取得できません」のエラーが発生します。解決方法はありますでしょうか。

返信する
いろはクロス

sudo様
ご返信遅くなり申し訳ありません。
確認したところ、当環境でもIE8以下で同様のエラーとなっておりました・・。
ですので、記事修正しましたのでご確認くださいませ。
sliceの前にif文を追加しています。
エラー発生の原因としては、
遷移前のページ(jquery_tabsample.html)ではURLに#tab1などのアンカーはありません。そのため、遷移前の時点では変数hashに値が入っていない。NULLの状態となっています。

ですので、sliceしようにもできませんよーというエラーになっておりました。逆に遷移後のページではこのエラーは発生していなかったはずです。

遷移前のページでエラーが出ないように、「hashに要素がある場合は~」と条件をつける為にif文を加えました。
これで当環境ではご連絡頂いたエラーは出なくなりました。解決策になっていれば幸いです。

返信する

コメントを残す

メールアドレスが公開されることはありません。