CSSのみを使用してクリック時にdivの背景色を変更する 質問する

CSSのみを使用してクリック時にdivの背景色を変更する 質問する

クリックすると色を変えたいdivがあります。全部で3つのdivがあり、クリックするとどれがアクティブなdivかを示すようにしたいのです。

基本的に、CSS のアクティブ プロパティを使いたいのですが、マウス アップが発生したときに特定の div が元に戻らないようにしたいのです。フォーカスのようなものです。また、役立つ場合は、bootstrap も使用しています。

以下はHTMLの例です

<div>
    Section 1
</div>
<div>
    Section 2
</div>
<div>
    Section 3
</div>

JavaScript を使用せずにこれを実現する方法を教えてください。

ベストアンサー1

tabIndex を追加して、DIV をフォーカス可能にします。

<div tabindex="1">
Section 1
</div>

<div tabindex="2">
Section 2
</div>

<div tabindex="3">
Section 3
</div>

:focus次に、疑似クラスを簡単に使用できます

div:focus {
    background-color:red;
}

デモ:http://jsfiddle.net/mwbbcyja/

おすすめ記事