すずしんろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

jQuery 外部プラグイン無しでタブ切り替え機能を実装する方法

time 2016/11/15

Tag:

タブ切り替え機能の実装

おはようございます、すずしんです。

今回の記事では、JavaScript、特にjQueryの勉強の一環としてタブ切り替え機能のサンプルを実装してみます。
外部プラグインなどは一切使わずに、自前のコードだけで実装していきます。
やり方自体はちょっと難しいかもしれませんが、この記事を読みながらならきっと実装できると思います。
どうぞ気軽に読み進めていってくださいね。

jQueryを使ってタブ切り替え機能を実装する方法

それでは、タブ切り替え機能を実装していきます。
HTML・CSS・jQueryの順にコードを組んでいきましょう。

HTML

まず、タブとタブの内容を表すコンテンツのHTMLを作成します。
最初のタブには「select」のクラスを設定します。
それ以外のタブのコンテンツには「hide」クラスを設定しています。

CSS

続いて、CSSのデザインをしていきます。
tabクラスにはオーバーフロー時の処理を設定します。
タブの要素(li)やタブのコンテンツ(div)には、適当にマージンや背景色などを設定しています。
hideクラスには非表示にするため「display: none」を設定します。
お使いのブログやホームページのデザインによっては、この設定でもレイアウトが崩れる場合がありますので適宜調整してください。

jQuery

最後に、お待ちかね(?)のjQueryの実装をしていきます。
ここでは、タブをクリックされたときの処理を記述します。

まず、クリックされたタブのインデックスを取得します。
そして、一度タブのコンテンツを非表示にしてから、選択されたタブのコンテンツを表示します。
以前に選択されていたタブに設定されているselectクラスは削除し、新たに現在選択されているタブにselectクラスを設定しています。

ちなみに、これは当たり前ですが…。
jQueryをこのコードよりも前で予め読み込んでおいてくださいね。

サンプルの実行結果

上記の実装で作成したタブ切り替え機能のサンプルの実行結果は以下のようになります。
上手くいけばこのように表示されると思います。

  • Tab 1
  • Tab 2
  • Tab 3
Tab 1の内容
Tab 2の内容
Tab 3の内容

ひとこと

今回の記事では、jQueryを使ってタブ切り替え機能の実装を行いました。
この中で手こずる部分というとCSSのデザインでしょうね。
CSSの知識がある程度無いと難しいかもしれません。
私も思い通りのレイアウトにするのにだいぶ苦労しました…。

タブを使ったデザインは、何だかスタイリッシュな感じがしますよね。
タブは非常に便利だと思いますので、あなたもぜひこの方法を使って実装してみてください。

follow us in feedly

down

コメントする




ファッション

プロフィール

鈴木俊吾(すずしん)

鈴木俊吾(すずしん)

大学卒業後、公務員を目指して試験に合格するも何故か辞退。その後は無職のまま特に何もない無駄な日々を過ごす。その内に精神状態がおかしくなり統合失調症を発症。今までに4度の入院を経験。ただいま絶賛人生のどん底を経験中。そんな私ですが、現在はフリーランスのプログラマーを目指して勉強を進めています。これまでにいくつかのアプリを公開しています。このブログは、人生大逆転を目指して奮闘する私の成長日記(?)です。どうか温かく見守って頂けるとありがたいです。 [詳細]

PR

広告枠
広告枠

ただいま広告を募集しています。
詳しくは以下のリンク先を参照してください。

アーカイブ



ブログ村ランキング