タブ切り替えUI
このタブ切り替え UI は、複数のパネルを 1 つの枠内に重ね、上部のボタンで表示を切り替える定番部品です。各ボタンには data-tab でパネルの識別子を持たせ、クリックすると全ボタンと全パネルから「アクティブ」クラスを外し、押されたボタンと対応するパネルだけに付け直します。
解説
このタブ切り替え UI は、複数のパネルを 1 つの枠内に重ね、上部のボタンで表示を切り替える定番部品です。各ボタンには data-tab でパネルの識別子を持たせ、クリックすると全ボタンと全パネルから「アクティブ」クラスを外し、押されたボタンと対応するパネルだけに付け直します。表示・非表示は CSS の display で制御し、フレームワークなしのバニラ JavaScript で完結しています。
使う場面
- 「概要・機能・料金」のように、関連情報を切り替えて見せたいとき
- 商品ページの説明とスペックとレビューを 1 か所にまとめたいとき
- 縦に長くなりがちな情報を、画面を占有せず整理したいとき
タブを増やすときは、ボタンと対応するパネルを同じ data-tab 値で対にして追加するだけです。アクティブなボタンは白背景と影で浮き上がる見た目になっており、配色は CSS で簡単に変えられます。アクセシビリティを高めたい場合は role="tab" やキーボード操作の対応を加えると、より親切な実装になります。
よくある質問
タブの数を増やせますか？
増やせます。ナビにボタンを 1 つ追加し、そのボタンの識別子と同じ値を持つパネルを用意して対にすれば、いくつでもタブを並べられます。コード本体を書き換える必要はありません。
外部ライブラリは必要ですか？
不要です。jQuery などのライブラリを使わず、標準の JavaScript だけで動きます。そのまま貼り付ければ、追加の読み込みなしにタブの切り替えが機能します。