Изменение цвета фона div по щелчку, используя только css

поэтому у меня есть div, который я хочу изменить цвет при нажатии. У меня есть три divs над всеми, и я хочу обозначить, какой из них является активным div при нажатии на него

в основном я хочу использовать свойство CSS active, но не иметь конкретного изменения div, когда происходит мышь. Вроде как фокус. Я также использую Bootstrap, если это полезно

вот пример html

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

может ли кто-нибудь сказать мне, как я могу это сделать без использования JavaScript?

3 ответов


сделайте свой DIVs фокусируемым, добавив tabIndex:

<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/


div:focus {
    background-color:'color';
}

попробуйте использовать этот

div .active {
    background-color:blue;
    }