スマホページにタブ切り替えをプラグインを使わず実装する

表示内容を瞬時に切り替えるタブメニューは、限られた画面サイズの中に多くの情報を持たせることができ、ページ切り替え時のHTTPリクエストによるオーバーヘッドも削減できるため、スマホページには有効な手段となります。

タブメニュー用のプラグインもあるのですが、今回はそれらを使わずjQueryだけで実装してみます。具体的には、下図のようなタブ切り替えメニューを作成することになります。

タブメニューを実装したスマホ画面

また、デスクトップPCでも全く同じように表示できますので、このページにも実装してみました。タブをクリックして動作するか確かめてください。

【コンテンツ】

  1. タブメニューのHTMLコードを作成する
  2. タブメニューのCSSコードを作成する
  3. タブをクリックしたときのJavaScriptコードを作成する
  4. jsファイル読み込みコードをHTMLに記述する

【記事執筆時の環境】
jQuery本体 1.11.1

タブメニューのHTMLコードを作成する

タブ切り替えを行うメニュー項目は li 要素にしますが、中にある a 要素の href 属性にはそれぞれのコンテンツに対応する id名を指定します。またデフォルトで表示する最初の要素には、 "active"クラスをつけます。

タブのコンテンツ部はそれぞれ id を指定し全く同じように記述しますが、ここでもデフォルトで表示するコンテンツには "active"クラスをつけます。

以下のようなコードになります。

タブメニューのCSSコードを作成する

関係する部分のCSSは以下になります。
ポイントは、 "active"クラスがついたコンテンツだけ「display: block;」で表示し、他は「display: none;」で非表示にしていることです。

タブをクリックしたときのJavaScriptコードを作成する

jQueryの関数を使ってコードを作成します。
タブをクリックしたら該当する要素に "active"クラスを付与し、他の要素からは "active"クラスを削除しているだけです。

コードは以下になります。

jsファイル読み込みコードをHTMLに記述する

作成したJavaScriptコードは、何か適当なファイルに記述します。
ここでは「tab.js」としておきましょう。それをサイトのディレクトリ内に配置します。

そしてHTMLのheadタグ内に、以下のように jsファイルを読み込む記述を追加します。
jQuery本体も必要ですので、Google Hosted Libraries から読み込んでいます。

以上、タブメニューをプラグインを使わないで実装する方法を解説しました。簡単に実装できますので、スマホ用のページには是非とも活用してみたいものです。

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ