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

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

jQuery日本語リファレンス

jQuery(英語版)

さいごに

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

関連記事

【jQuery】タブ切り替え実装サンプル集(上下連動、下タブを押すとスクロールして上に、外部ページからのリンクIDも可能)

【 jQuery】プラグイン『tabs.js』で簡単にタブ切り替え

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

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

キツネとレモン KITSUNE TO LEMON
キツネとレモン KITSUNE TO LEMON
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう