125naroom / デザインするところ(会社)です。

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

【 jQuery】プラグイン『tabs.js』で簡単にタブ切り替え
きのこさん
あのー、簡単にタブを作りたいのですがー
きのこさん
じゃあ、プラグインを使って簡単に作ってみましょう

簡単にタブを作ってみる(プラグイン使用)

See the Pen
【 jQuery】プラグインのtabs.jsを使って簡単にタブ切り替えをしてみる
by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<div id="tabs">
	<ul>
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<li>E</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: #ffdfdf;
  border: 1px solid #999;
  border-bottom: none;
}

jQuery

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tabs.js"></script>
$(document).ready( function() {
  tabify( '#tabs' );
});

複数設置したい場合は?

複数設置したい場合は、jQueryの記述を2個、3個と追加する必要があります。
HTMLのIDの紐付けも忘れずに。

See the Pen
【 jQuery】プラグインのtabs.jsを使って簡単にタブ切り替えをしてみる(複数設置)
by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<div id="tabs1">
	<ul>
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<li>E</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>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<li>E</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: #ffdfdf;
  border: 1px solid #999;
  border-bottom: none;
}

jQuery

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tabs.js"></script>
$(document).ready( function() {
  tabify( '#tabs1' );
  tabify( '#tabs2' );
});

『tabs.js』のダウンロード

『tabs.js』に必要なファイルは下記サイトからダウンロードできます。

GitHub – 125naroom/jquery.tab

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。

jQuery日本語リファレンス

jQuery(英語版)

さいごに

きのこさん
わー、簡単だー
きのこさん
デザインを変えたい場合はCSSを追加していけばオッケーですよー

関連記事

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

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

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
ちょっと思い出しただけ
【Google Chrome】ショートカットキーまとめ(Windows or Mac)