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

【jQuery】タブを効率良く作ってみる（複数設置、プラグインなし）
1ページにタブを3個くらい置きたいのですがー
おー、なるほどー。じゃあ、プラグインなしで作ってみますねー

とりあえずタブを1個作ってみる（プラグインなし）

今回のテーマ。

  • roleとaria-expandedを使ってタブが切り替わるようにしてみよう。
  • keyCodeの指定もしておこう。

See the Pen 【jQuery】タブを効率良く作ってみる（プラグインなし） by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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

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】タブを効率良く作ってみる、2個置いてみる（プラグインなし） by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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

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とCSSとjQueryはこちら

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

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の日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。

jQuery日本語リファレンス
jQuery（英語版）

さいごに

わー、使いやすいですー
外部ページからのリンクIDも可能にしたい場合は、下の記事のほうがいいですねー

関連記事

【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、外部ページからのリンクIDも可能）
【 jQuery】プラグイン『tabs.js』で簡単にタブ切り替え
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

2021.10.28

7

/

19

2025

SPONSORED LINK

おすすめの広告です

広告

google

デザインのこと - Web design gallery
いつかのこと

カテゴリー

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】アコーディオン実装サンプル10選
【jQuery】アコーディオン実装サンプル10選
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）

7

/

19

2025

SPONSORED LINK

おすすめの広告です

広告

google

関連記事

2

/

2

2024

【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー アコーディオン、シンプル版 See the Pen アコーディオン、シ

...
【jQuery】アコーディオン実装サンプル10選

デザインのメモ

5

/

14

2024

【jQuery】クリッカブルマップ『RWD Image Maps』を使いこなせば、レスポンシブでもズレませーん

スマホだとクリッカブルがズレますー そんな時は『RWD Image Maps』を使いましょうー 【実装】丸でクリッカブルしてみました 画像サイズ（widthとheight）の指定は必須です。 See the Pen 【j

...
【jQuery】クリッカブルマップ『RWD Image Maps』を使いこなせば、レスポンシブでもズレませーん

デザインのメモ

4

/

4

2024

【jQuery】 ローディング、実装サンプル集

ローディングをまとめてみました。おしゃれなサイトさんはローディングを組み込んでいるなー、と思う今日この頃です。意外と簡単なのでお時間ありましたら組み込んでみてくださいませ。 ローディングを設定したいのですが難しいですかー

...
【jQuery】 ローディング、実装サンプル集

デザインのメモ

Googleさんの
おすすめ

7

/

19

2025

SPONSORED LINK

おすすめの広告です

広告

google

人気記事

2024.3.1

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

ん、ハンバーガー？ 三本線がハンバーガーに見えるからってことらしいですよ クリックエフェクト サンプル集 いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。

...
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

デザインのメモ

2024.7.11

【jQuery】スライダープラグイン「slick」実装サンプル集

slick（スリック）の使い方をまとめてくださいー わかりましたー よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

...
【jQuery】スライダープラグイン「slick」実装サンプル集

デザインのメモ

2024.2.2

【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー アコーディオン、シンプル版 See the Pen アコーディオン、シ

...
【jQuery】アコーディオン実装サンプル10選

デザインのメモ

もっと見る

Googleさんの
おすすめ

7

/

19

2025

SPONSORED LINK

おすすめの広告です

広告

google

デザインの記事

社会福祉法人さつき会
廊下ができたんだ
【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能）