【 jQuery】プラグイン『tabs.js』で簡単にタブ切り替え
- 更新
- デザインのメモ
あのー、簡単にタブを作りたいのですがー
じゃあ、プラグインを使って簡単に作ってみましょう
簡単にタブを作ってみる（プラグイン使用）
コードを見る（HTML・CSS・jQuery）
HTML
<div id="tabs">
<ul>
<li><button type="button">A</button></li>
<li><button type="button">B</button></li>
<li><button type="button">C</button></li>
<li><button type="button">D</button></li>
<li><button type="button">E</button></li>
</ul>
<div>
<p>タブ-A-です。</p>
</div>
<div>
<p>タブ-B-です。</p>
</div>
<div>
<p>タブ-C-です。</p>
</div>
<div>
<p>タブ-D-です。</p>
</div>
<div>
<p>タブ-E-です。</p>
</div>
</div>
CSS
/*=========
わかりやすくホバーだけ追加してます（他はプラグインのまま）
=========*/
.tabs-nav li:hover {
background-color: #f3efe6;
border: 1px solid #2b2a27;
border-bottom: none;
}
/* タブを button にしたので、見た目を文字だけに（キーボードでも選べます） */
.tabs-nav li button {
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
cursor: pointer;
}
.tabs-nav li button:focus-visible {
outline: 2px solid #2b2a27;
outline-offset: 4px;
}
jQuery
▽jQuery と tabs.js を読み込む（tabs.js は下の GitHub からダウンロードもできます）
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/125naroom/jquery.tab@ee6169a72d47291ec569981b841f6ea0886fb0e0/jquery.tab.js"></script>
$(function () {
tabify('#tabs');
});
複数設置したい場合は？
複数設置したい場合は、jQueryの記述を2個、3個と追加する必要があります。
HTMLのIDの紐付けも忘れずに。
コードを見る（HTML・CSS・jQuery）
HTML
<div id="tabs1">
<ul>
<li><button type="button">A</button></li>
<li><button type="button">B</button></li>
<li><button type="button">C</button></li>
<li><button type="button">D</button></li>
<li><button type="button">E</button></li>
</ul>
<div>
<p>タブ-A-です。</p>
</div>
<div>
<p>タブ-B-です。</p>
</div>
<div>
<p>タブ-C-です。</p>
</div>
<div>
<p>タブ-D-です。</p>
</div>
<div>
<p>タブ-E-です。</p>
</div>
</div>
<div id="tabs2">
<ul>
<li><button type="button">A</button></li>
<li><button type="button">B</button></li>
<li><button type="button">C</button></li>
<li><button type="button">D</button></li>
<li><button type="button">E</button></li>
</ul>
<div>
<p>タブ-A-です。</p>
</div>
<div>
<p>タブ-B-です。</p>
</div>
<div>
<p>タブ-C-です。</p>
</div>
<div>
<p>タブ-D-です。</p>
</div>
<div>
<p>タブ-E-です。</p>
</div>
</div>
CSS
/*=========
わかりやすくホバーだけ追加してます（他はプラグインのまま）
=========*/
.tabs-nav li:hover {
background-color: #f3efe6;
border: 1px solid #2b2a27;
border-bottom: none;
}
/* タブを button にしたので、見た目を文字だけに（キーボードでも選べます） */
.tabs-nav li button {
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
cursor: pointer;
}
.tabs-nav li button:focus-visible {
outline: 2px solid #2b2a27;
outline-offset: 4px;
}
jQuery
▽jQuery と tabs.js を読み込む（tabs.js は下の GitHub からダウンロードもできます）
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/125naroom/jquery.tab@ee6169a72d47291ec569981b841f6ea0886fb0e0/jquery.tab.js"></script>
$(function () {
tabify('#tabs1');
tabify('#tabs2');
});
『tabs.js』のダウンロード
『tabs.js』に必要なファイルは下記サイトからダウンロードできます。
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。
さいごに
わー、簡単だー
デザインを変えたい場合はCSSを追加していけばオッケーですよー
関連記事
デザコトauthor
あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。
