CSSだけで押したボタンを活性化する

デモ

http://codepen.io/ttakuru88/pen/rrZGzm

説明

:target擬似クラスは、リンクのターゲット(#hoge部分)に反映するスタイルを書くことができる。
そのため、次のようにaタグのhrefとidを一緒にすることにより、cssだけで実現できる。

<a href="#one" id="one">one</a>

JavaScriptでこれを実装すると、あるボタンが押された時に他のボタン非活性にするという処理が面倒だったりする。けれども、URLが書き換わるので正直使うかと言われたら使わないと思う。

タイトルとURLをコピーしました