CSS OnClick активный класс не работает

Question

http://jusurubak.azurewebsites.net/www/EnrollmentMethod.aspx

Я пытаюсь иметь кнопки оставаться красным при выборе ... они краснеют, когда колебались. Я добавил активный класс в css, но он не останется красным при выборе. См. CSS ниже для кнопок:

.btn-red-lg { 
display: block; 
background-color: #666666; 
color: white; 
padding: 30px 30px; 
margin: 20px auto; 
border-radius: 12px; 
text-align: center; 
-o-transition: background-color .5s; 
-moz-transition: background-color .5s; 
-webkit-transition: background-color .5s; 
transition: background-color .5s; 
font-size: 14px; 
} 

.btn-red-lg:hover { 
background-color: #cc0033; 
} 

.btn-red-lg:active { 
background-color: #cc0033; 
} 

.active:active { 
color: #cc0033;; 
} 
.focus:focus { 
color: #cc0033; 
} 
:target { 
color: #cc0033; 
} 

.btn-red-lg h3, .btn-red-lg p { 
color: white; 
line-height: 1.3em; 
} 

.btn-red-lg h3 { 
text-transform: uppercase; 
font-size: 25px; 
font-weight: normal; 
margin-bottom: 6px; 
} 

Answer 1

Используйте JavaScript для получения наилучшего и простого результата. Пример: https://jsfiddle.net/stzvebcq/4/

HTML

<button class="button">button</button> 
<div class="button">div</div> 
<a href="#" class="button">link</a> 

CSS

.clicked{ 
    background-color:red; 
} 

JS

$(".button").on("click",function(){ 
    $(this).addClass("clicked"); 
}); 

В этом примере используется библиотека JQuery.

Answer 2

Так, чтобы уточнить, вы пытаетесь сделать кнопки красными после того, как их нажали? Если это так, попробуйте добавить «посетил» класс:

.btn-red-lg:visited { 
background-color: #cc0033; 
} 

Вы можете узнать более подробную информацию о ссылке псевдоклассов здесь: http://www.w3schools.com/css/css_pseudo_classes.asp

Answer 3

Это кнопка реального HTML вы подаете эти классы? Класс :active pseduo будет активирован только тогда, когда пользователь нажал на кнопку и не отпустил щелчок. Возможно, :focus - это то, что вы ищете, поскольку это изменит фон кнопки на красный, даже если пользователь отпустил мышь, пока пользователь не закроет.

Answer 4

Поскольку у вас нет четкого и краткого вопроса, невозможно понять, какова ваша проблема на самом деле. Вы должны отредактировать свой вопрос, чтобы предоставить простой пример.

Я подозреваю, что вы используете JQuery или такие, чтобы изменить класс элемента:

$(".btn-red-lg").click(function() { 
    $(this).addClass("active"); 
}); 

Таким образом, хотя вы не дали весь код, необходимый, чтобы знать наверняка, это выглядит, как вы следует изменить «активный» стиль в не включают модификатор:

.active { 
color: #cc0033;; 
} 

Я подозреваю, что вы делаете с классом «фокус» нуждается в модификации тоже:

.focus { 
color: #cc0033; 
}