webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

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

タブ
この記事を書いている人
Marie

Marie

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

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

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

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

感謝です

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

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

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

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名の場合は書き換えてくださいね。

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

最後に今回思ったこと

あるきっかけから今回の記事のテーマに至ったわけですが、ちょっとだけ思ったことがあります。

私ももちろん、普段こういうことしたいな〜と思って、コードを探して参考に使わせていただきます。

そこで出てきたコードが、もしかしたら自分にとっては分かりにくいもの(=複雑な書き方をしていて自分で理解が困難なもの)かもしれません。

その時は、1サイトのみではなく複数サイトを確認してみた方が良いかな〜と思います。

複数見て、シンプルなものから参考にする方が分かりやすいんじゃないかなと思います。

実際に今回タブの参考で使用されていたjQueryのコードを見させていただくと、タブの実装になんでこんな複雑な書き方をするの?と私は感じてしまうコードでございました。

(否定するつもりはありません

ゴリゴリのプログラムが分からない私には、よく分からない書き方でした(笑)

ということは、カスタムが難しいと思いましたので、別のシンプルなタブ実装コードを使いました。

(経験から、もっと簡単にタブを実装できると既に知っていたからそうしたのかもしれませんが…。多分、最初に見たサイトが正解って思いますよね。)

これはコーディング(HTMLやCSS)でも同様だと思います。

人によって書き方が違うんです。

「コーディングがわからなくて挫折しました」とおっしゃる方は、超シンプルにしたコードを学んでいないのかもしれません。

教えてくれた先生が初学者さんには分かりにくい複雑なことをしていたり、最初から実務レベルのコーディングをレクチャーしていたり、また、コーディングはできすぎるけど伝える(教える)ことが苦手な方等、いろんな方がいらっしゃいます。

もし一度つまずいた経験がある方でも、別の教材、別の先生から教えてもらうと分かりやすい!ということがあると思います。

もしコーディングを一度は諦めたけどやってみたいという方は、別の環境でスタートされてみたら良いかと思います。

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード タブと別ページから”タブを開いた状態”でのリンクを実装【jQuery】

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)