あのー、簡単にタブを作りたいのですがー
じゃあ、プラグインを使って簡単に作ってみましょう
簡単にタブを作ってみる（プラグイン使用）
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』に必要なファイルは下記サイトからダウンロードできます。
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。
さいごに
わー、簡単だー
デザインを変えたい場合はCSSを追加していけばオッケーですよー
