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

あのー、簡単にタブを作りたいのですがー

じゃあ、プラグインを使って簡単に作ってみましょう

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

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

<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>

/*=========
わかりやすくホバーだけ追加してます（他はプラグインのまま）
=========*/
.tabs-nav li:hover {
  background-color: #ffdfdf;
  border: 1px solid #999;
  border-bottom: none;
}

<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.

<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>

/*=========
わかりやすくホバーだけ追加してます（他はプラグインのまま）
=========*/
.tabs-nav li:hover {
  background-color: #ffdfdf;
  border: 1px solid #999;
  border-bottom: none;
}

<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】タブを効率良く作ってみる（複数設置、プラグインなし）