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

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

コラム

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

WEB全般に投稿したコラム記事

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

Tabsletサイトイメージ
タブボタンをクリックしてコンテンツを表示非表示するjQueryプラグイン

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

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

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

本家サイトとGitHub

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

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_tb_171101.zip
組み込み済みサンプル

サンプルです。

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

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

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

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

今回、追加で読み込ませたファイルは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>タブテスト1</span></div>
<div id="tab-2"><span>タブテスト2</span></div>
<div id="tab-3"><span>タブテスト3</span></div>
</div>

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

</div>

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

最後に動作確認

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

その他、補足

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

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_171030.zip 」です。
締め

昨今、Googleはコンテンツを隠している時は、その隠している内容をスニペット(検索結果画面の中にあるサイトを説明する文章の部分)には表示しないと言っています。
Googleの本意としては、コンテンツは隠さずに表示しましょう・・・というところです。

とは言え、ユーザーへの見せ方のこだわりなどは決して悪いことではありません。
ですので、ワンポイント的な、要所でしか使えないかもしれませんが、無駄なスペースを取ることなくコンテンツを表示することはできます。

Googleは隠しているコンテンツ部分はスニペットに表示しないとは言っていますが、決してペナルティになるということを言っているわけではありません。
ですので、複数の項目を一度に見せるような時には是非、使われてみてはいかがでしょうか。

執筆 : 清水 隼斗

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

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP