0

У меня есть 2 элемента, привилегии и звания, при нажатии на одно из двух у них появляется задний фон (по умолчанию стоят привилегии), но мне нужно что бы при нажатии к примеру на 2 элемент, у 1 элемента удалялся задний фон. Как это сделать? Вот код

HTML:

<div class="shop-content__body">
    <div class="shop-content__body-select shop-content__body-default">
        <h2>Привелегия</h2>
    </div>
    <div class="shop-content__body-select">
        <h2>Звание</h2>
    </div>
</div>

JQUERY:

let priv = $('.shop-content__body-select')

$('.shop-content__body-default').addClass('active');

priv.on('click', function(){
        
    $(this).toggleClass('active');
        
    let privFirst = $('.shop-content__body-default');
    let privLast = $('.shop-content__body-two');

    if(privFirst.hasClass('active')){
        privFirst.removeClass('active');
    }else if(privLast.hasClass('active')){
        privLast.removeClass('active');
    }

});

3 ответа 3

1

$('.shop-content__body-default h2').addClass('active');
$('.shop-content__body').on('click', '.shop-content__body-select h2', function(ev) {
  $('.shop-content__body-select h2').removeClass('active');
  $(ev.target).addClass('active');
});
.active { background-color: yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shop-content__body">
  <div class="shop-content__body-select shop-content__body-default">
    <h2>Привелегия</h2>
  </div>
  <div class="shop-content__body-select">
    <h2>Звание</h2>
  </div>
  <div class="shop-content__body-select">
    <h2>Рейтинг</h2>
  </div>
</div>

0

Просто по клику удаляем класс active у всех элементов с целевым классом и выставляем класс active у того, по которому кликнули.

let shopContentSelector = '.shop-content__body-select';
let $shopContent = $(shopContentSelector)

$('.shop-content__body-default').addClass('active');

$shopContent.on('click', function(){
    $shopContent.removeClass('active');    
    $(this).addClass('active');
    
    // ... Какой-то ещё код    
});
.active {
    background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="shop-content__body">
    <div class="shop-content__body-select shop-content__body-default">
        <h2>Привелегия</h2>
    </div>
    <div class="shop-content__body-select">
        <h2>Звание</h2>
    </div>
</div>

0

Слоган JQuery: Пиши меньше, делай больше!

$('.shop-content__body-select').on('click', function() {
  $(this).addClass('active').siblings().removeClass('active');
}).first().addClass('active');
.active {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shop-content__body">
  <div class="shop-content__body-select shop-content__body-default">
    <h2>Привелегия</h2>
  </div>
  <div class="shop-content__body-select">
    <h2>Звание</h2>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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