作るもの

web開発で使えるタブUIをJavaScriptに依存せずに作る。

実装

まず、装飾をつけずに作ってみる。

See the Pen Untitled by Laddge (@laddge) on CodePen.

タブ部分はradioボタンで実装するとよい。CSSからchecked属性で振り分けることができる。

この時点ですでに機能としては完成してるが、装飾を加えて使いやすくする必要がある。
デフォルトのradioボタンを見えないようにして、labelを設置すればよい。

See the Pen Tab UI 0 by Laddge (@laddge) on CodePen.