目標 プラグインを使わずにタブスィッチを実装する
今回はjavascriptのお話でございます。
最近プラグインを使わずに実装した
タブ切り替え機能の紹介をしたいと思います。
HTML
まずタブとタブに連動したコンテンツのHTMLを用意します。
一番目のタブに「class=”select”」をつけます。
最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、
ここでは「class=”hide”」をつけました。
html
<ul class="tab">
<li class="select">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>
</ul>
<ul class="content">
<li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</li>
<li class="hide">なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</li>
<li class="hide">新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。</li>
<li class="hide">弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</li>
</ul>
CSS
先ほどつけた「hide」というクラスには「display:none;」を設定します。
それ以外は最低限のCSSのみ記述しているので、必要な部分はお好みで書き込んでください。
（ちなみにCSSはリセットされている状態です。）
css
.tab{
overflow:hidden;
}
.tab li{
background:#ccc;
padding:5px 25px;
float:left;
margin-right:1px;
}
.tab li.select{
background:#eee;
}
.content li{
background:#eee;
padding:20px;
}
.hide {
display:none;
}
Jquery
jQueryで『タブをクリックしたら連動したコンテンツを表示する』指示を記述していきます。
もちろんですが、jQueryは先に読み込ませてください。
javascript
$(function() {
//クリックしたときのファンクションをまとめて指定
$('.tab li').click(function() {
//.index()を使いクリックされたタブが何番目かを調べ、
//indexという変数に代入します。
var index = $('.tab li').index(this);
//コンテンツを一度すべて非表示にし、
$('.content li').css('display','none');
//クリックされたタブと同じ順番のコンテンツを表示します。
$('.content li').eq(index).css('display','block');
//一度タブについているクラスselectを消し、
$('.tab li').removeClass('select');
//クリックされたタブのみにクラスselectをつけます。
$(this).addClass('select')
});
});
DEMO
[
](https://gyazo.com/ae0fdc916553
3b6bbe213239f852f61e)
これで完成
数行でシンプルに実装できます。
いろいろ応用が出来ると思いますので試してみてください。
2026年3月 追記（最新情報）
この記事は2020年2月に投稿されました。
jQueryの現在の位置づけ
jQueryは2026年現在もメンテナンスされていますが、Railsのデフォルトからは削除されています。新規プロジェクトでは以下の代替技術が推奨されます：
Stimulus.js（Rails標準・推奨）
Rails 7+ に同梱されている軽量JavaScriptフレームワークで、タブのような DOM操作に最適です：
<div data-controller="tabs">
<div role="tablist">
<button role="tab" aria-selected="true"
data-action="click->tabs#select">Tab 1</button>
<button role="tab" aria-selected="false"
data-action="click->tabs#select">Tab 2</button>
</div>
<div role="tabpanel">Content 1</div>
<div role="tabpanel" hidden>Content 2</div>
</div>
その他の選択肢
- Vanilla JavaScript: モダンブラウザAPIで十分代替可能
- Alpine.js: Stimulus代替の軽量リアクティブフレームワーク
アクセシビリティ（ARIA）の追加を推奨
2026年現在、タブUIには以下のARIA属性が求められます：
-
role="tablist"、role="tab"、role="tabpanel" -
aria-selected="true/false"（選択状態） - キーボードナビゲーション（矢印キー、Home、End）対応