タブ切替型の新着リスト
「ニュース／ブログ／イベント」を一つのカード内でタブ切替して見せる新着リストです。ボタンに付けた data-tab と、各リストの data-pane を JavaScript で照合し、選んだ種別のリストだけを表示、他は hidden 属性で隠します。
解説
「ニュース／ブログ／イベント」を一つのカード内でタブ切替して見せる新着リストです。ボタンに付けた data-tab と、各リストの data-pane を JavaScript で照合し、選んだ種別のリストだけを表示、他は hidden 属性で隠します。表示の出し分けは要素の追加削除ではなく hidden の付け外しだけなので、DOM の構造を保ったまま軽く切り替わります。
使うと効く場面
- コーポレートサイトのトップで、お知らせとブログと開催情報をスペースを取らず並べたいとき
- 採用ページで「募集職種」「社員の声」「イベント」を切り替えて見せたいとき
- サービス紹介で「機能」「料金」「事例」をコンパクトにまとめたいとき
カスタマイズはタブを増やすだけなら、ボタンと対応するリストを同じ data-tab と data-pane の値で一組追加します。アクセシビリティを高めるなら、ボタンに role="tab" と aria-selected を、リストに role="tabpanel" を付け、左右キーで移動できるようにすると、より丁寧な実装になります。
よくある質問
タブを4つ以上に増やせますか？
増やせます。ボタンを一つ追加して data-tab に新しい値を付け、同じ値を data-pane に持つリストを一つ用意するだけです。JavaScript 側は値を見て一致するものだけ表示するので、コードを書き換える必要はありません。
JavaScript は必須ですか？
この実装では必須です。クリックでリストの hidden を切り替える処理を JavaScript が担っているためです。CSS だけで作る方法もありますが、ラジオボタンを隠して使うなどの工夫が必要になり、構造が複雑になります。