jqueryを使ったタブメニューの作り方【簡易版】

-
カテゴリー:
javascript 

中々尋常じゃない暑さと忙しさが続いており、ブログ書けていなかったんですが、小さなネタでもいいから書こうかなと思います。(汗

コンテンツがいくつかのカテゴリー分けがされており、1ページに収めるには縦に長くなりすぎるなぁって時によく使うタブメニューの作り方なんかを紹介したいと思います。

まずは、HTMLのサンプルコードです。

上記のコードでは、#tab_contentで対象となるコンテンツ全体を囲み、#tab_head内がタブの切り替えを行うメニュー、各.boxがタブメニューで表示、非表示が切り替わるコンテンツとなっております。

次にCSSです。

#tab_head li a.activeは、現在表示されているコンテンツと対になっているメニューのオンオフをわかりやすくするための記述です。
はじめに記載したHTMLでは1番目のアンカーに.activeを適用しています。

#tab_content .boxは、display:none;で全て非表示の状態にし、1番目のコンテンツにあたる.box#tab01をdisplay:block;で表示させています。

上記2つの記述方法はjavascript側で行う事も可能なのですが、今回は、簡易版ということで、cssとhtml側で簡易的に対応しました。

最後にjavascriptの記述です。

#tab_head li内のアンカーがクリックされるとそのクリックされたアンカーに.activeを適用し、hrefの中身を読み取り、該当のコンテンツを表示させています。
hrefには表示させたいコンテンツのIDを記述しています。

サンプルはコチラ