jQueryでタブメニュー
Yuuです。
今日は、jQueryのみでタブ切り替え(フェード付)の実装です。 jQueryのみで実装できるので、簡単な切り替えのみならお手軽感満載。
jQueryの読み込み
1
|
|
あらかじめ、jQueryをhtmlファイルに読み込んでおきます。
html
1 2 3 4 5 6 7 8 9 10 11 12 |
|
タブメニューとコンテンツ内容をそれぞれ記述します。 ポイントはclassで指定した「tabContents」 このクラスをjQueryによって、表示の切り替えとして利用します。
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
初めに、コンテンツ内容を非表示にします。 次に、メニューの最初の項目にclassでactiveを追加します。 また、コンテンツ内容の最初の項目を表示します。
あとはタブメニューがクリックされたら、activeクラスを削除し、クリックされた項目に付加。 同時に表示していたコンテンツ内容を消してフェードで新しいコンテンツを表示します。
CSSのスタイリングとhtmlもシンプルな構成なので結構お気に入りです。 豊富な機能とか求めるのであれば、jQueryプラグインのjQuery UI Tabsとか使うのもいいかと思います。