jQuery タブ切り替えを作る その1(基本)

こんにちは、デザイナーのKaです。
今回も、jQueryですぐに使いそうなサンプルコードということで、「タブの切替え」を書いていきたいと思います。

タブはnavタグの中にul liタグで用意しています。
切替えコンテンツ枠は、sectionタグでタブと同じ数用意します。
中身は見出しにh3タグ、imgタグ、pタグを適当に入れています。
 
 
 
 
レイアウトとデザインのcssは、必要なものだけ用意します。

全体を中央に寄せるためにmainタグに横幅とmargin:auto; を指定し、
タブの方で見た目を分かりやすくするためにちょっとデザインしています。
 
 
 
 
最後にjqueryです。

 
 
 
 
 
 
デモは以下になります。

ページ1

image1

ページ1テキストページ1
テキストページ1テキストページ1
テキストページ1テキストページ1テキストページ1テキスト
ページ1テキスト

ページ2

image2

ページ2テキストページ2テキストページ2
テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキスト

ページ3

image3

ページ3テキストページ3テキストページ3テキストページ3
テキストページ3テキストページ3テキストページ3テキストページ3テキスト

ページ4

image4

ページ4テキストページ4テキストページ4テキストページ4テキストページ4
テキストページ4テキストページ4テキストページ4テキスト

 

Share on Facebook0Tweet about this on TwitterShare on Google+0Email this to someone