1

Не могу понять как сделать так, чтобы активный цвет был только у одной нажатой кнопки. Сейчас просто цвет добавляется к каждой кнопке после клика

$('.view-btn').click(function(){
  $(this).css("background", "#0074d6");
});
.view-btn {
  cursor: pointer;
  padding: 15px;
  color: #fff;
  background: blue;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>

2 ответа 2

4

$('.view-btn').click(function(){
  $('.view-btn').removeClass("active");
  $(this).addClass("active");
});
.view-btn {
  cursor: pointer;
  padding: 15px;
  color: #fff;
  background: blue;
  display: inline-block;
}
.active {
  background: #0074d6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>

без класса active

$('.view-btn').click(function(){
  $('.view-btn').css("background", "");
  $(this).css("background", "#0074d6");
});
.view-btn {
  cursor: pointer;
  padding: 15px;
  color: #fff;
  background: blue;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>

2
  • а без класса active возможно?
    – stiv
    Commented 10 июл. 2018 в 5:44
  • 2
    @StepanIvanov Можно, но не стоит. Инлайновые стили - не есть хорошо.
    – Hikikomori
    Commented 10 июл. 2018 в 6:13
2

Можно даже без JavaScript

.view-btn{
  display:inline-block;
  position:relative;
  width:30px;
}
.view-btn input{
  display:block;
  position:absolute;
  top:0;
  left:0;
  margin:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.view-btn span{
  display:block;
  width:100%;
  line-height:30px;
  text-align:center;
  background-color:#acd;
}
.view-btn :checked + span{
  background-color:#cda;
}
<div class="view-btn">
  <input type="radio" name="btn" />
  <span>*</span>
</div>
<div class="view-btn">
  <input type="radio" name="btn" />
  <span>*</span>
</div>
<div class="view-btn">
  <input type="radio" name="btn" />
  <span>*</span>
</div>
<div class="view-btn">
  <input type="radio" name="btn" />
  <span>*</span>
</div>
<div class="view-btn">
  <input type="radio" name="btn" />
  <span>*</span>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.