タブと別ページから”タブを開いた状態”でのリンクを実装【jQuery】

2023/11/28 | 2023/11/18 1578

この記事を書いている人

Marie

フリーランスwebデザイナー＆講師
2児ママ
制作会社・インハウスデザイナーを経験し独立
オンラインwebデザイン教室ちいウェブ運営
仕事の合間の息抜きに植物を育てています♡
スプラ・DIY・将棋がすき

もっと詳しくみる

タブはシンプルにjQueryで実装できます。

さらに、別ページから特定のタブを開いた状態でのリンクを実装する方法も紹介します。

たまたま良い質問をいただいたので、ブログネタになりました。

感謝です

私自身も制作を始めた頃、分からないなりに試行錯誤して、今に辿り着きました。

懐かしい気持ちや、当時の記憶を思い出したりして、こういう質問は嬉しいですね。

今回は別ページからのリンクも含まれるので、完成見本はこちらにご用意しております。

[目次]

1 HTML
2 jQUery + CSS
3 別ページからアクティブなタブへのリンク
4 同一ページ内からのタブへのリンク(追記)
- 4.1 リロードしない書き方
5 最後に今回思ったこと

HTML

では早速、タブのHTMLから見ていきましょう。

タブの実装のみであれば、タブボタンにはidはつけなくても良いのですが、今回別ページからのリンクをタブボタンにつけるに当たり、idをつけています。

<ul class="tab">
	<li id="tab_btn-1">
		<a href="#tab_cont-1">
			タブ1
		</a>
	</li>
	<li id="tab_btn-2">
		<a href="#tab_cont-2">
			タブ2
		</a>
	</li>
	<li id="tab_btn-3">
		<a href="#tab_cont-3">
			タブ3
		</a>
	</li>
</ul>

<div id="tab_cont-1" class="tab_cont">
	<p>コンテンツ1</p>
</div>

<div id="tab_cont-2" class="tab_cont">
	<p>コンテンツ2</p>
</div>

<div id="tab_cont-3" class="tab_cont">
	<p>コンテンツ3</p>
</div>

ulでタブのボタン部分を作成し、それぞれのコンテンツへのアンカーリンクを貼っています。

コンテンツには、それぞれにIDと共通classをつけています。

jQUery + CSS

$(function(){
  $('.tab li').on('click', function(){
    let index = $('.tab li').index(this);

    $('.tab li').removeClass('active');
    $(this).addClass('active');
		
    $('.tab_cont').removeClass('active');
    $('.tab_cont').eq(index).addClass('active');
  });
});

タブ機能をつけるだけだと、これだけでOKです。

「active」というclassがつくようになっているので、ついたら表示、なければ非表示というCSSを指定します。

.tab {
	display: flex;
	flex-wrap: wrap;
}
.tab_cont {
	display: none;　/*いつもは非表示*/
	padding: 2em;
	border: 3px solid #eee;
	border-radius: 0 0 15px 15px;
	transition: 1s;
}
.tab_cont.active {
	display: block; /* activeがついたら表示 */
	background: #eee;
}
.tab li {
	border: 3px solid #eee;
	border-bottom: none;
	padding: .6em;
	width: 33.333%;
	text-align: center;
	transition: 1s;
}
.tab li:nth-child(2) {
	border-left: none;
	border-right: none;
}
.tab li.active {
	background: #eee;
}
a {
 display: block;
 width: 100%;
 height: 100%;
}

ナビゲーション等にリンク不要の場合は上記jQuery + CSSのみで実装可能です。

別ページからアクティブなタブへのリンク

そして今回のポイント、別ページからのリンクは以下のjQueryを利用します。

コンテンツではなく、タブに飛んだ方が良いので検討した結果これがシンプルなんじゃないでしょうか。

$(function() {

  //現在ページURLのハッシュ部分を参照する
  var hash = location.hash;
  hash = (hash.match(/^#tab_btn-\d+$/) || [])[0];
 
  //リンクにハッシュが入っていればtabnameに格納
  if($(hash).length){
    var tabname = hash.slice(1) ;
  } else {
		var tabname = "tab_btn-1";
	}

  //コンテンツ非表示&タブを非アクティブ
  $('.tab_cont').removeClass("active");
  $('.tab li').removeClass('active');
 
  //何番目のタブかを格納
  var tabno = $('.tab li#' + tabname).index();
 
  //コンテンツ表示
  $('.tab_cont').eq(tabno).addClass('active');
 
  //タブのアクティブ化
  $('.tab li').eq(tabno).addClass('active');
});

同一ページ内からのタブへのリンク(追記)

ナビゲーションからのリンクが想定されますが、ナビゲーションは、別ページからも同ページからも共通のリンクである方が便利です。

色々検討した結果、これでいいんじゃ…と思ったのがこちらです。

①

$('.btn a').on('click',function() {
  var href= jQuery(this).attr("href");
  window.location.href = href;
	location.reload()
});

こちらを追記すると、同一ページのボタン（.btn）から飛んだ場合に、URLを表示させた後に一度更新が入ります。

ナビゲーションからしか飛ばないと考えると、一度更新させても問題ないかと思いました。

リロードしない書き方

先ほどの書き方では、URLを取得した後にリロードさせることで、リンク先タブをアクティブにしています。

同一ページ内リンクであれば、やっぱりリロードさせたくない！という方は下記の記述を追加で貼ってください。

その場合は、①は不要です。

$('.btn a').on('click',function() {
		
  //現在ページURLのハッシュ部分を参照する
  var hash = location.hash;
  hash = (hash.match(/^#tab_btn-\d+$/) || [])[0];
 
  //リンクにハッシュが入っていればtabnameに格納
  if($(hash).length){
    var tabname = hash.slice(1) ;
  } else {
		var tabname = "tab_btn-1";
	}
  //コンテンツ非表示&タブを非アクティブ
  $('.tab_cont').removeClass("active");
  $('.tab li').removeClass('active');
 
  //何番目のタブかを格納
  var tabno = $('#' + tabname).index();

  //コンテンツ表示
  $('.tab_cont').eq(tabno).addClass('active');
  //タブのアクティブ化
  $('.tab li').eq(tabno).addClass('active');
	
});

class=”btn”を指定していますが別class名の場合は書き換えてくださいね。

もっと上手い書き方が見つかれば追記します。