HTMLのラジオボタンとCSSで、JavaScriptを使わずに
文字情報や写真を切り替える簡単なライブラリを作成できます。
See the Pen POgxaV by webdev (@webdev-jp-net) on CodePen.0
カレント表示を切り替えるスタイル設定
cssだけでcheckboxやradioのデザインを変更と、CSS間接セレクタ「~」と隣接兄弟セレクタ「＋」の使いどころの応用で
チェックされたラジオボタンの兄弟要素を指定する :checked ~ を使って、選択中要素の表示を切り替えています。
注意すべきところは、間接セレクタの結合子 ~ でつなげる要素は
HTML上でラジオボタンよりも後に記述されていないとCSSが適用されない点です。
そのため、サンプルのHTMLでの記述順は、ざっくりこんな順番になっています。
- ラジオボタン（非表示）
- サムネールとなっているlabel
- 選択中要素を大きく表示されるメインの枠
サムネールとメイン表示の紐付け
ラジオボタンのvalue属性を利用して input[value="1"]:checked ~ .box1 のような書き方をすると
選択中となっているラジオボタンごとに、兄弟要素の中から特定要素に絞り込んだスタイル指定ができます。
サンプルではSassのループ文を使っていますが
valueが1でチェック状態のinput 以降に登場する隣接要素 の子孫で、data-itemの値が1の要素
を特定し、可視状態としています。
デザインによっては要素数に上限がある
JavasScriptを使っていないので、デザインによっては上限が固定となってしまいます。