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

さいごに

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

関連記事

Author

デザコト

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

Googleさんの
おすすめ

10

/

15

2024

Googleさんの
おすすめ

10

/

15

2024

デザインの記事

餃子そして焼味 巣王
ルックバック
【jQuery】スライダープラグイン「slick」実装サンプル集