【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

11

/

21

2024

SPONSORED LINK

おすすめの広告です

広告

google

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

カテゴリー

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】アコーディオン実装サンプル10選
【jQuery】アコーディオン実装サンプル10選
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【CSS】シンプルなボタンデザイン実装サンプル集
【CSS】シンプルなボタンデザイン実装サンプル集

11

/

21

2024

SPONSORED LINK

おすすめの広告です

広告

google

関連記事

9

/

17

2021

【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）

jQueryを使うとするするとスクロールして移動させることができます。視覚的にもとても良いのでおすすめです。また、グローバルメニューの固定などの影響で移動先が隠れてしまった（ズレた）時には簡単に調整することができます。

...
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）

デザインのメモ

5

/

28

2024

【jQuery】iOS（Safari）だと100vhが少しはみ出てしまう対策

あ、iPhoneで見るとちょっとズレてますー そんな時はブラウザの高さを自動で取得しちゃえばOKですよー 画像を画面いっぱいに表示する（ブラウザサイズを自動で取得してiOS対策） See the Pen 【jQuery】

...
【jQuery】iOS（Safari）だと100vhが少しはみ出てしまう対策

デザインのメモ

6

/

25

2021

【jQuery】動画を全画面表示にして中央に表示する、スマホでも崩れない

動画をどーんと表示したいのですができますかー？ できますよー 【サンプル】動画を全画面表示にして中央に表示する 動画の上にタイトルを置いてみます。スクロールできますー。 See the Pen 【jQuery】動画を全画

...
【jQuery】動画を全画面表示にして中央に表示する、スマホでも崩れない

デザインのメモ

Googleさんの
おすすめ

11

/

21

2024

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さんの
おすすめ

11

/

21

2024

SPONSORED LINK

おすすめの広告です

広告

google

デザインの記事

水色デザイン
映画『アット・ザ・ベンチ』
【jQuery】スライダープラグイン「slick」実装サンプル集