【jQuery】タブを効率良く作ってみる(複数設置、プラグインなし)
- 2021.10.28
- jQuery


1ページにタブを3個くらい置きたいのですがー

おー、なるほどー。じゃあ、プラグインなしで作ってみますねー
とりあえずタブを1個作ってみる(プラグインなし)
今回のテーマ。
・roleとaria-expandedを使ってタブが切り替わるようにしてみよう。
・keyCodeの指定もしておこう。
See the Pen
【jQuery】タブを効率良く作ってみる(プラグインなし) by 125naroom (@125naroom)
on CodePen.
コードはこちら
HTML
<div class="u-tab"> <ul class="u-tab__menu" role="tablist"> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="true"><span class="u-tab__item-main">タブ1</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ2</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ3</span></a> </li> </ul> <div class="u-tab__body u-block" role="tabpanel" aria-expanded="true">タブ1のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ2のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ3のこと</div> </div>
CSS
.u-tab__menu { display: flex; align-items: flex-end; margin-right: -1rem; margin-bottom: 0; padding-left: 0; } .u-tab__menu li { list-style: none; } .u-tab__menu>* { width: calc(33.333333% - 1rem); margin-right: 1rem; } .u-tab__item { display: flex; align-items: center; justify-content: center; color: #333; text-align: center; text-decoration: none; outline: 0; padding: 0.6em 0.5em; border: 1px solid #222222; border-bottom: 0; box-sizing: border-box; background: #f7faff; cursor: pointer; transition-property: background; transition-duration: 0.3s; } .u-tab__item[aria-expanded="true"] { color: #fff; padding: 1.0em 0.5em; background: #222222; } .u-tab__item:not([aria-expanded="true"]):hover { color: #333; background: #e5e5e5; } .u-tab__item-main { flex-grow: 1; font-size: 16px; text-align: center; } .u-tab__body { display: none; font-size: 16px; border: 1px solid #222222; padding: 40px; } .u-tab .u-block { display: block; } .u-tab .u-none { display: none; }
jQuery
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
roleとaria-expandedを使ってタブが切り替わるようにしています。
keyCodeの指定もしておこうと思います。
$(function(){ if($('.u-tab').length){ var splitNum = location.search.substr(1).split(/&/); var list = new Object(); for(i=0;i<splitNum.length;i++){ var localsplit = splitNum[i].split(/=/); list[localsplit[0]] = localsplit[1]; } $('.u-tab').each(function (){ var tabMenu = $(this).find('[role="tab"]'); var tabPanel = $(this).find('[role="tabpanel"]'); if(list["tab"] && list["tab"].search(/^[-]?[0-9]+$/) == 0 && tabMenu[list["tab"]] ){ tab( $(tabMenu[list["tab"]]) ); }else if( !tabMenu.is('[aria-expanded="true"]') ){ tab( $(tabMenu[0]) ); } tabMenu.on('click', function() { tab($(this)); return false; }); tabMenu.on("keydown", function(e) { if (e.keyCode == 13){ $(this).trigger("click"); }else if (e.keyCode == 39){ $(this).parent().next().children().focus().trigger("click"); }else if (e.keyCode == 37){ $(this).parent().prev().children().focus().trigger("click"); } }); function tab(obj){ if(obj.attr('aria-expanded') == 'false'){ tabMenu.attr('aria-expanded', 'false'); obj.attr('aria-expanded', 'true'); tabPanel.hide(); tabPanel.eq(obj.parent().index()).attr('aria-expanded', 'true').fadeIn(); if(typeof set_image_size == "function") set_image_size(); } } }); } });
タブを2個置いてみる(プラグインなし)
同じソースをコピペするだけオッケーですね。
あー、簡単簡単。
See the Pen
【jQuery】タブを効率良く作ってみる(プラグインなし) by 125naroom (@125naroom)
on CodePen.
コードはこちら
HTML
<div class="u-tab"> <ul class="u-tab__menu" role="tablist"> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="true"><span class="u-tab__item-main">タブ1</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ2</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ3</span></a> </li> </ul> <div class="u-tab__body u-block" role="tabpanel" aria-expanded="true">タブ1のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ2のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ3のこと</div> </div> <div class="u-tab"> <ul class="u-tab__menu" role="tablist"> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="true"><span class="u-tab__item-main">タブ1</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ2</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ3</span></a> </li> </ul> <div class="u-tab__body u-block" role="tabpanel" aria-expanded="true">タブ1のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ2のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ3のこと</div> </div>
CSS
.u-tab__menu { display: flex; align-items: flex-end; margin-right: -1rem; margin-bottom: 0; padding-left: 0; } .u-tab__menu li { list-style: none; } .u-tab__menu>* { width: calc(33.333333% - 1rem); margin-right: 1rem; } .u-tab__item { display: flex; align-items: center; justify-content: center; color: #333; text-align: center; text-decoration: none; outline: 0; padding: 0.6em 0.5em; border: 1px solid #222222; border-bottom: 0; box-sizing: border-box; background: #f7faff; cursor: pointer; transition-property: background; transition-duration: 0.3s; } .u-tab__item[aria-expanded="true"] { color: #fff; padding: 1.0em 0.5em; background: #222222; } .u-tab__item:not([aria-expanded="true"]):hover { color: #333; background: #e5e5e5; } .u-tab__item-main { flex-grow: 1; font-size: 16px; text-align: center; } .u-tab__body { display: none; font-size: 16px; border: 1px solid #222222; padding: 40px; } .u-tab .u-block { display: block; } .u-tab .u-none { display: none; }
jQuery
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
roleとaria-expandedを使ってタブが切り替わるようにしています。
keyCodeの指定もしておこうと思います。
$(function(){ if($('.u-tab').length){ var splitNum = location.search.substr(1).split(/&/); var list = new Object(); for(i=0;i<splitNum.length;i++){ var localsplit = splitNum[i].split(/=/); list[localsplit[0]] = localsplit[1]; } $('.u-tab').each(function (){ var tabMenu = $(this).find('[role="tab"]'); var tabPanel = $(this).find('[role="tabpanel"]'); if(list["tab"] && list["tab"].search(/^[-]?[0-9]+$/) == 0 && tabMenu[list["tab"]] ){ tab( $(tabMenu[list["tab"]]) ); }else if( !tabMenu.is('[aria-expanded="true"]') ){ tab( $(tabMenu[0]) ); } tabMenu.on('click', function() { tab($(this)); return false; }); tabMenu.on("keydown", function(e) { if (e.keyCode == 13){ $(this).trigger("click"); }else if (e.keyCode == 39){ $(this).parent().next().children().focus().trigger("click"); }else if (e.keyCode == 37){ $(this).parent().prev().children().focus().trigger("click"); } }); function tab(obj){ if(obj.attr('aria-expanded') == 'false'){ tabMenu.attr('aria-expanded', 'false'); obj.attr('aria-expanded', 'true'); tabPanel.hide(); tabPanel.eq(obj.parent().index()).attr('aria-expanded', 'true').fadeIn(); if(typeof set_image_size == "function") set_image_size(); } } }); } });
タブを3個置いてみる(プラグインなし)
同じソースをコピペするだけオッケーですね。
あー、なんて楽なんだー。
See the Pen
【jQuery】タブを効率良く作ってみる、3個置いてみる(プラグインなし) by 125naroom (@125naroom)
on CodePen.
コードはこちら
HTML
<div class="u-tab"> <ul class="u-tab__menu" role="tablist"> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="true"><span class="u-tab__item-main">タブ1</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ2</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ3</span></a> </li> </ul> <div class="u-tab__body u-block" role="tabpanel" aria-expanded="true">タブ1のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ2のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ3のこと</div> </div> <div class="u-tab"> <ul class="u-tab__menu" role="tablist"> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="true"><span class="u-tab__item-main">タブ1</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ2</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ3</span></a> </li> </ul> <div class="u-tab__body u-block" role="tabpanel" aria-expanded="true">タブ1のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ2のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ3のこと</div> </div> <div class="u-tab"> <ul class="u-tab__menu" role="tablist"> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="true"><span class="u-tab__item-main">タブ1</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ2</span></a> </li> <li> <a href="#" class="u-tab__item" role="tab" aria-expanded="false"><span class="u-tab__item-main">タブ3</span></a> </li> </ul> <div class="u-tab__body u-block" role="tabpanel" aria-expanded="true">タブ1のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ2のこと</div> <div class="u-tab__body" role="tabpanel" aria-expanded="false">タブ3のこと</div> </div>
CSS
.u-tab__menu { display: flex; align-items: flex-end; margin-right: -1rem; margin-bottom: 0; padding-left: 0; } .u-tab__menu li { list-style: none; } .u-tab__menu>* { width: calc(33.333333% - 1rem); margin-right: 1rem; } .u-tab__item { display: flex; align-items: center; justify-content: center; color: #333; text-align: center; text-decoration: none; outline: 0; padding: 0.6em 0.5em; border: 1px solid #222222; border-bottom: 0; box-sizing: border-box; background: #f7faff; cursor: pointer; transition-property: background; transition-duration: 0.3s; } .u-tab__item[aria-expanded="true"] { color: #fff; padding: 1.0em 0.5em; background: #222222; } .u-tab__item:not([aria-expanded="true"]):hover { color: #333; background: #e5e5e5; } .u-tab__item-main { flex-grow: 1; font-size: 16px; text-align: center; } .u-tab__body { display: none; font-size: 16px; border: 1px solid #222222; padding: 40px; } .u-tab .u-block { display: block; } .u-tab .u-none { display: none; }
jQuery
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
roleとaria-expandedを使ってタブが切り替わるようにしています。
keyCodeの指定もしておこうと思います。
$(function(){ if($('.u-tab').length){ var splitNum = location.search.substr(1).split(/&/); var list = new Object(); for(i=0;i<splitNum.length;i++){ var localsplit = splitNum[i].split(/=/); list[localsplit[0]] = localsplit[1]; } $('.u-tab').each(function (){ var tabMenu = $(this).find('[role="tab"]'); var tabPanel = $(this).find('[role="tabpanel"]'); if(list["tab"] && list["tab"].search(/^[-]?[0-9]+$/) == 0 && tabMenu[list["tab"]] ){ tab( $(tabMenu[list["tab"]]) ); }else if( !tabMenu.is('[aria-expanded="true"]') ){ tab( $(tabMenu[0]) ); } tabMenu.on('click', function() { tab($(this)); return false; }); tabMenu.on("keydown", function(e) { if (e.keyCode == 13){ $(this).trigger("click"); }else if (e.keyCode == 39){ $(this).parent().next().children().focus().trigger("click"); }else if (e.keyCode == 37){ $(this).parent().prev().children().focus().trigger("click"); } }); function tab(obj){ if(obj.attr('aria-expanded') == 'false'){ tabMenu.attr('aria-expanded', 'false'); obj.attr('aria-expanded', 'true'); tabPanel.hide(); tabPanel.eq(obj.parent().index()).attr('aria-expanded', 'true').fadeIn(); if(typeof set_image_size == "function") set_image_size(); } } }); } });
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。
さいごに

わー、使いやすいですー

外部ページからのリンクIDも可能にしたい場合は、下の記事のほうがいいですねー
関連記事
【jQuery】タブ切り替え実装サンプル集(上下連動、下タブを押すとスクロールして上に、外部ページからのリンクIDも可能)
おすすめ
かんれん
- web / 2023.4.25
- 【CSS】見出しデザインをまとめてみる(左右に線を引くとか)
- web / 2021.1.5
- 【CSS】ul、olの改行位置を揃える(リセットCSSを使用している場合)
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.06.05New
- NEWTOWN/グラフィック・Webデザイン
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.04.25
- 【CSS】見出しデザインをまとめてみる(左右に線を引くとか)
- 見出しのデザインをまとめてくださーい わ、わかりましたー もくじ 左右に線を引く 左…
- 125naroom / デザインするところ(会社)です。