タブ切り替えを実装する方法

STUDIO Tips

サンプルページの閲覧

タブboxとコンテンツboxを作成します。
サンプルでは、タブbox(幅:1000px/縦:80px)、コンテンツbox(幅:1000px/縦:480px)で作成しています。

タブboxに内包する形でメニュー部分を作成します。

メニューと同じ数のコンテンツを作成します。
縦・横どちらに並べても構いません。

各コンテンツにIDを設定します。
サンプルでは、category-a~category-dまでを設定しています。

各メニューに対して、ページ内リンクを設定します。

4つのコンテンツをContentsBoxに内包させます。

コンテンツboxにOverflow:hidden;を設定

☆TabBoxの重ね順を「1」に設定します。
☆ContentsBoxのトップのマージンにマイナスの数字を設定します。
サンプルでは、メニューと同じ縦サイズ(80px)に対して、「-80px」を設定。
☆重ね順とマージンの設定により、タブboxとコンテンツboxの位置を同じ高さにします。
それによって、タブメニューを選択した際に、画面から隠れてしまうのを防ぐことができるようになります。


【注意点】
ポイントはコンテンツのマージントップにマイナスの数字を入力して、タブとコンテンツのトップの位置を揃えることです。
上記の設定をしない場合、タブを選択した際にコンテンツのトップの位置が画面上部に移動してしまい、タブが画面の外に隠れてしまうことがあります。

サンプルページの閲覧

関連記事

特集記事

TOP