【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

4

/

19

2024

SPONSORED LINK

おすすめの広告です

広告

google

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

カテゴリー

人気記事

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

4

/

19

2024

SPONSORED LINK

おすすめの広告です

広告

google

関連記事

2

/

21

2020

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

あ、iPhoneで見るとちょっとズレてます！ そんな時はブラウザの高さを自動で取得しちゃえばOKですよー もくじ 画像を画面いっぱいに表示する（ブラウザサイズを自動で取得してiOS対策） 『slick』を使って全画面表示

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

デザインのメモ

9

/

23

2019

【jQuery】class（クラス）の追加と削除

jQueryを使えば、class（クラス）の追加も削除も簡単にできます。 どんなときに使いますか？ ボタンを押してスタイルを変えたい時とか便利ですよー もくじ 『addClass』class（クラス）の追加 『remov

...
【jQuery】class（クラス）の追加と削除

デザインのメモ

4

/

3

2024

【jQuery】指定した場所までスクロールすると下からふわっと出てくる

あのー、下からふわっと出したいのですが、場所指定ってできますかー？ 場所指定、できますよー 【サンプル】指定した場所までスクロールすると下からふわっと出てくる まずはスクロールですねー See the Pen 【jQue

...
【jQuery】指定した場所までスクロールすると下からふわっと出てくる

デザインのメモ

Googleさんの
おすすめ

4

/

19

2024

SPONSORED LINK

おすすめの広告です

広告

google

人気記事

2024.3.1

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

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

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

デザインのメモ

2024.2.2

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

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

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

デザインのメモ

2019.9.27

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

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

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

デザインのメモ

もっと見る

Googleさんの
おすすめ

4

/

19

2024

SPONSORED LINK

おすすめの広告です

広告

google

デザインの記事

MEJINAVI2024
  • 2024.04.17New
  • MEJINAVI2024
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
5年経った無印良品窓の家
【jQuery】 ローディング、実装サンプル集