タブでコンテンツを表示非表示することができるjQueryプラグイン「Tabslet」の使い方

コラム

Tabsletは、タブボタンを設置し、そのボタンをクリックしたりhoverすることで、コンテンツの表示非表示を切り替える挙動をします。
説明になっていますかね。もし、ご理解が難しいようでしたら、サンプル設置を見てみてください。それはそうと、配布元のサンプル記述では正常に動作しなかったように思います。ということで、適宜、若干修正した感じではありますが、正常に動作しましたので、どうぞご確認を宜しくお願いいたします。

「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Tipsに投稿したコラム記事

タブでコンテンツを表示非表示することができるjQueryプラグイン「Tabslet」の使い方

jQuery/JS Tips

タブボタンをクリックしてコンテンツを表示非表示するjQueryプラグイン

Tabsletは、タブボタンをクリックしてコンテンツを表示非表示するjQueryプラグインです。
なんかスムーズな動作をしてくれるので、小気味良い感じがしています。

動作の詳細については、本家サイトかサンプルでご覧ください。

今回、Tabsletは、どのデバイスから見ても表示されるようにしていると思います。
デバイス毎に表示を変える場合、追加で作成したtesttab.cssを修正してください。

本家サイトとGitHub

本家サイトとGit Hubです。
プラグイン一式をダウンロードして頂けます。

ダウンロードと組み込みサンプル

組み込み済みファイルのダウンロード

phptemp_tb_171101.zip

組み込み済みサンプル

サンプルです。

組み込み済みサンプル

今回はトップページにのみ設置しています。

元になるWEBサイトテンプレート（PHP）について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

コンテンツSEOのためのWEBサイトテンプレート（PHP）

ポイント

追加で読み込ませたファイル

今回、追加で読み込ませたファイルはjsファイルとcssファイルでした。
cssファイルは装飾のためですので、当サイトのcssを基準としてカスタマイズしていただければ簡単にできるのではないでしょうか。

<link href="/column/web/171101/01/css/testtab.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/column/web/171101/01/js/jquery.tabslet.js"></script>

testtab.cssという命名は適当な命名です。
その中身の大半は本家の装飾内容です。

testtab.cssは端末を選ばずに使えるようなイメージでしていますので、適宜修正するなりしてお使いください。

jQueryの設定記述

以下のような感じで書いてください。
オプションが豊富にあるようですので、本家サイトで他のオプションについてはご確認ください。
下記のソースに追記していただければと思います。

<script type="text/javascript">
$(document).ready(function() {
	$('.tabs').tabslet();
});
</script>

コンテンツ部分の設置

外部ファイルを読み込ませることができましたら、次はコンテンツ部分をそのまま設置してください。

<div id="test-tabarea">

<div class="tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
<div id="tab-1"><span>タブテスト１</span></div>
<div id="tab-2"><span>タブテスト２</span></div>
<div id="tab-3"><span>タブテスト３</span></div>
</div>

<script type="text/javascript">
$(document).ready(function() {
	$('.tabs').tabslet();
});
</script>

</div>

今回は、設定記述もコンテンツ部分に記述しました。
とにかく、一旦、そのままコピペして、正常に動作する状態からスタートした方がやりやすいように感じました。

最後に動作確認

ということで、最後は動作確認をして終了です。
装飾はそう難しいことではないんですが、コンテンツの配置の仕方に若干の癖がありそうな感じがします。

その他、補足

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。