タブ(ボタン)をクリックして表示を切り替えるスクリプトの無料ダウンロード

公開日

2018年10月9日

最終更新日

2021年10月25日

著者

Motohiro Tani

タブをクリックすることで、ウェブサイト上のとある領域の表示を切り替えるためのスクリプトを作りました。
このスクリプトの名称は「タブスイッチスクリプト」とします。
タブでスイッチ(切り替え)するため、そのような名称にしました。

とは言っても実際に使用する際には、タブではなくボタンにすることも可能です。
「タブ」であるか、それとも「ボタン」であるかは、CSSでのデザイン次第です。
便宜上、以下からの解説は「タブ」と表記して進めていきます。

特にスマホの場合は画面上に表示できるページ領域が狭いため、PCでは表示されているものをスマホでは非表示にする場合があります。
そのような際の選択肢の1つとして「タブ式の切り替えにする」というやり方が考えられます。

このスクリプトを使用すれば、各エリアを簡単にタブ切り替え式にすることができます。
また、既存のページに組み込むことを前提として作られていますので、設置作業やカスタマイズがしやすいようにできています。

現在の最新バージョンは2019年7月29日公開の2.0です。
参考ページ：プログラムをアップデートするの際の思想について

各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

特長

• HTMLページにも組み込み可能。
• 設定用のファイルなし。サーバにアップロードするだけで動きます。
• いくつでもタブや表示エリアを増やすことが可能。(タブのグループは1つのみ)
• デザインはすべてCSSで自由に変更可能です。
• jQuery不要。(バージョン2.0から)

タブスイッチスクリプトのサンプルとダウンロード

タブスイッチスクリプトのサンプル
初期状態ではページ表示時に「タブ2」が選択された状態になっています。
これを他のタブに変更して使用することも可能です。

タブスイッチスクリプトをボタン化したサンプル
「タブ」のデザインはCSSで設定されていますので、CSSを変更することでこのようなボタンのデザインにすることも可能です。

タブスイッチスクリプトのダウンロード
無料でダウンロードできます。

使い方の説明(基本設置方法)

まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。

1、タブスイッチスクリプトをダウンロードし、展開する。

2、フォルダごとサーバにアップロードする。

3、ブラウザでindex.htmlにアクセスし、動作を確認する。

既存サイトへの組み込み方法

以下の作業は同梱のindex.htmlのソースからコピーしていくと間違いがないでしょう。

4、組み込みたいページにリスト形式(ul li)でタブを用意する。
これは必ずul要素である必要があります。このプログラムの仕様です。
そのul要素にはtab-menuというクラス名を付けてください。

<ul class="tab-menu">
  <li class="tab-1">タブ1</li>
  <li class="tab-2">タブ2</li>
  <li class="tab-3">タブ3</li>
  <li class="tab-4">タブ4</li>
</ul>

上記のタブの数(li要素)は増やしたり減らしたり自由にできます。(上記コードは4つに減らしています)
また、それぞれのタブ項目(li要素)は上記のようにtab-1から数字を順番にしたクラス名を付けてください。

5、表示するエリアのコードをページ内に追加してください。
以下のコード(初期状態)のように、tab-1から数字を順番にしたクラス名のdiv要素を設置します。
これは必ずdiv要素である必要があります。このプログラムの仕様です。

<div class="tab-1">
  ここに表示したい内容。
</div>

<div class="tab-2">
  ここに表示したい内容。
</div>

上記コードのdivの中にはどのようなHTML要素を記入しても問題ありません。
その部分はこのプログラムの動作に影響しません。

画像を設置してもOKですし、ulやdlのようなリスト要素を設置してもOKですし、その気になれば当サイトで配布しているレスポンシブ・メールフォームのようなプログラムを組み込むことも可能です。

6、tab-switch.cssを読み込ませる。
このtab-switch.cssの設置場所はどこでも構いません。
サーバ上にすでにcssという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。

<link rel="stylesheet" href="css/tab-switch.css" />

7、tab-switch.jsを読み込ませる。
このtab-switch.jsの設置場所もどこでも構いません。
サーバ上にすでにjsという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。

<script src="js/tab-switch.js"></script>

8、上記手順4で設置したli要素の中で、ページ表示時にアクティブ(表示状態)にしておきたいタブに対してactiveというクラス名を追加する。
(初期状態ではタブ2がアクティブ(表示状態)になっています)

<li class="tab-2 active">タブ1</li>

9、上記手順8でアクティブ(表示状態)にしたli要素と同じ番号のdiv要素にもactiveというクラス名を追加する。

><div class="tab-2 active">

組み込み作業は以上です。
デザインを変更したりする前に、この時点で動作確認をしてみましょう。

タブのデザインを変更する方法

タブのデザインを変更したい場合は、上記手順の4で設置したul id=”tab-menu”に対してCSSで自由に変更してください。

この「タブスイッチスクリプト」は、CSSをどのように編集したとしても動作エラーの原因にはなりませんので、自由にCSSでデザインしてください。
ボタン風のデザインにしたり、画像を設置することも可能です。

プログラムファイル(JS)では、クリックされたli要素のクラス名に応じたdiv要素に対して表示・非表示の切り替えをするだけの仕組みになっています。
表示上の見た目はすべてCSSで設定されています。

imageフォルダとその中にある画像について

初期状態ではimageという名前のフォルダがあり、その中に数枚の画像が格納されています。
これは既存サイトに組み込む際には不要ですので、フォルダごと削除しても問題ありません。

注意点

サポートに関して

カスタマイズに関して

ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。

アップデート履歴

2018/10/09　バージョン1.0

• 公開。

2019/07/29　バージョン2.0

• jQueryが不要になりました。
• 既存サイトに組み込みやすいようにtab-switch.cssから不要なコードを削除しました。