簡単！タブメニューの作り方

タブメニューのコード

早速ですが今回使用するコードです。

See the Pen
Untitled by orench (@orench0913)
on CodePen.

上記のコードでタブメニューを簡単に実装できます。
HTML、CSS、JSそれぞれ解説します。

HTML

See the Pen
html by orench (@orench0913)
on CodePen.

構造はシンプルでタブとコンテンツの２つのブロックで構成しています。
タブボタンのaタブのdate属性で表示するコンテンツを指定しています。

CSS

See the Pen
Untitled by orench (@orench0913)
on CodePen.

CSSも特に難しいことはしていません。
コンテンツをdisplay: noneで非表示にして
is-activeがつくことでコンテンツの中身が浮かび上がるように表示されます。

JS

See the Pen
Untitled by orench (@orench0913)
on CodePen.

まず、デフォルトで表示するコンテンツと付随するタブボタンにaddClassでis-activeを追加しています。
次に、タブボタンをクリックすることでremoveClassでコンテンツとタブボタンからis-activeを取り除き、
クリックされたボタンとそのボタンのdate属性で指定されたコンテンツにaddClassでis-activeを追加しています。

タブメニューの注意点

タブメニューは少ない表示領域で多くの情報を表示できます。
しかし、常に表示されているわけではないので
ユーザーの操作や閲覧を委ねているコンテンツ内の情報すべてを閲覧してもらうのは難しいです。
なので閲覧してもらいたい情報はタブメニューなどを利用せず常に表示されるようにしましょう。