他のページからのアクセス時に特定のタブコンテンツを開く方法

通常、他のページからタブが設置されたページにアクセスすると、1つ目のタブがアクティブな状態になります。ですが、他のページからアクセスした時に、指定したタブをアクティブにしたい、ということもあるかと思います。

そんなわけで、今回は他のページから特定のタブコンテンツへダイレクトにアクセスする方法をご紹介したいと思います。リンクにパラメータを追加する方法とハッシュを追加する方法の2パターンを解説いたします。

タブ切り替え型コンテンツの作成

まずは、タブ切り替え型のコンテンツを作成します。HTMLは以下のようにします。

<div id="tabs">
  <ul>
    <li id="tab1"><a href="#panel1">タブ1</a></li>
    <li id="tab2"><a href="#panel2">タブ2</a></li>
    <li id="tab3"><a href="#panel3">タブ3</a></li>
    <li id="tab4"><a href="#panel4">タブ4</a></li>
    <li id="tab5"><a href="#panel5">タブ5</a></li>
  </ul>

  <div id="panel1" class="panel">
    タブ1の内容
  </div>
  <div id="panel2" class="panel">
    タブ2の内容
  </div>
  <div id="panel3" class="panel">
    タブ3の内容
  </div>
  <div id="panel4" class="panel">
    タブ4の内容
  </div>
  <div id="panel5" class="panel">
    タブ5の内容
  </div>
</div>

jQueryのスクリプトは以下のようにします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('.tabs a[href^="#panel"]').click(function(){
    $('.tabs .panel').hide();
    $('.tabs a').removeClass('active');
    $(this).toggleClass('active');
    $(this.hash).fadeIn();
    return false;
  });
  $('.tabs a[href^="#panel"]:eq(0)').trigger('click');
});
</script>

すでにjQuery本体を読み込んでいる場合は、1行目は削除してください。

とりあえずこれでタブ切り替えコンテンツは完成です。あとは、CSSで見た目を整えてください。

リンク元にパラメータを追加して特定のタブコンテンツを開く方法

タブを設置したページへリンクする際に、パラメータを追加して特定のタブを開く方法からご紹介いたします。

リンク元のa要素には、以下のように「?id=」というパラメータを追加します。値は開きたいタブのIDを指定します。

<a href="index.html?id=tab2"></a>

続いて、以下のようなスクリプトを追加します。

<script>
$(function() {
  //URL取得とチェック
  var url = location.href;
  url = (url.match(/\?id=tab\d+$/) || [])[0];

  //取得したURLを「?」で分割
  var params = url.split("?");

  //params内のデータを「=」で分割
  var tab = params[1].split("=");

  //tab内のデータをtabnameに格納
  if($(tab).length){
    var tabname = tab[1];
  } else{
    var tabname = "tab1";
  }

  //コンテンツ非表示&amp;タブを非アクティブ
  $('.tabs .panel').hide();
  $('.tabs a').removeClass('active');

  //何番目のタブかを格納
  var tabno = $('.tabs li#' + tabname).index();

  //コンテンツ表示
  $('.tabs .panel').eq(tabno).fadeIn();

  //タブのアクティブ化
  $('.tabs a').eq(tabno).addClass('active');
});
</script>

リンクに追加したパラメータから、何番目のタブを開くかを判定してアクティブ化しています。

コピペでOKですが、HTML側のIDやクラス名を変更している場合は、適宜変更してください。

上記の場合、リンクをクリックしてアクセスすると、”tab2″が開いた状態になります。

リンク元にハッシュを追加して特定のタブコンテンツを開く方法

2パターン目は、リンク元にハッシュ(#tab1等)を追加して特定のタブを開く方法です。

リンク元のa要素は以下のように内部リンクを指定してあげます。

<a href="index.html#tab2"></a>

以下のスクリプトを追加します。

<script>
$(function() {
  //リンクからハッシュを取得
  var hash = location.hash;
  hash = (hash.match(/^#tab\d+$/) || [])[0];

  //リンクにハッシュが入っていればtabnameに格納
  if($(hash).length){
    var tabname = hash.slice(1) ;
  } else{
    var tabname = "tab1";
  }

  //コンテンツ非表示&amp;タブを非アクティブ
  $('.tabs .panel').hide();
  $('.tabs a').removeClass('active');

  //何番目のタブかを格納
  var tabno = $('.tabs li#' + tabname).index();

  //コンテンツ表示
  $('.tabs .panel').eq(tabno).fadeIn();

  //タブのアクティブ化
  $('.tabs a').eq(tabno).addClass('active');
});
</script>

リンクに追加したハッシュから、何番目のタブを開くかを判定してアクティブ化しています。こちらの方法ではリンクにハッシュを使うため、スクロール位置もタブの部分に移動します。

こちらも1つ目のパターンと同じようにコピペでOKですが、HTML側のIDやクラス名を変更している場合は、適宜変更してください。

あとがき

タブが設置されたページにアクセスした時に、スクロール位置をページトップにしたい場合はパラメータを使った方法、スクロール位置をタブまで移動したい場合はハッシュを使った方法を採用すると良いですね。

タブ切り替え型のコンテンツを設置していて、他のページからアクセスした時に特定のタブを最初に開きたい時は、ぜひ参考にしていただければと思います。

他のページからのアクセス時に特定のタブコンテンツを開く方法