動機
- タブ切り替え時、未選択状態では全て表示しておいてもらいたい
- しかし、既存のタブ切り替えの初期状態は、
- 選択されるまでコンテンツは非表示
- どれが一つが選択されている(たいてい最初の項目)
- どうすればいいのか?
セレクタで列挙する
/* チェックされたら表示 */
#members:checked ~ * ul.members li,
#blueprints:checked ~ * ul.blueprints li,
#notations:checked ~ * ul.notations li{
display: block;
}
/* チェックされてなかったら非表示 */
#members:not(:checked) ~ * ul.members li,
#blueprints:not(:checked) ~ * ul.blueprints li,
#notations:not(:checked) ~ * ul.notations li{
display: none;
}
/* 全部チェックされてなかったら表示 */
#members:not(:checked) ~ #blueprints:not(:checked) ~ #notations:not(:checked) ~ * ul.members li,
#members:not(:checked) ~ #blueprints:not(:checked) ~ #notations:not(:checked) ~ * ul.blueprints li,
#members:not(:checked) ~ #blueprints:not(:checked) ~ #notations:not(:checked) ~ * ul.notations li
{
display: block;
}
欠点
- 書き下すのがめんどくさい
- 有限ならまだしも、動的に項目数が変わった場合とかどうすんの!?
- なんとかならないものか...
タブ切り替え再考
- これから表示するものを選択するのではない
- 表示しているものから抽出して表示したいのだ
既存のタブ切り替えと違うのであるから、従来のやり方では無理がある
挙動からフィルタリングタブと命名(my造語たぶん)
方針
- 素直に、表示している状態を初期状態として
- 選択したもの以外を非表示にすれば良い
- そのためには...? notセレクタを使う!
フィルタリングタブ
- 選択された項目の識別子を持たない要素の子要素は、非表示
#members:checked ~ * label ~ ul:not(.members) li,
#blueprints:checked ~ * label ~ ul:not(.blueprints) li,
#notations:checked ~ * label ~ ul:not(.notations) li{
display: none;
}
- 1/3行に減ったぜ、、、
実例
See the Pen filteringTab by H-Katz (@HGatz) on CodePen.
まとめ
- 表示したものから条件で抽出して表示したい場合、notセレクタを使えば短くできる
- 項目が動的に増えても、増えた分類に対して1行CSSを追加するだけで良い