Как реализовать по клику добавление класса одному элементу и удаление у другого?

Question

Как реализовать, чтобы при клике одному элементу добавлялся класс show, а у других элементов удалялся класс?

Я так полагаю, у меня не работает из за того, что во второй функции скрипт хочет удалить show, но его не существует. Как тогда реализовать, чтобы на тот случай если активно, удалялось?

//если нажат hit то, остальные классы не активны

$('.hit').click(
  function() {
    $('.slider_hit').addClass('show'); // Добавляем класс 
  },
  function() {
    $('.slider_hit').removeClass('show');
    $('.slider_sovet').removeClass('show');
    $('.slider_sale').removeClass('show');
  }
);

//если нажат new то, остальные классы не активны

$('.new').click(
  function() {
    $('.slider_new').addClass('show'); // Добавляем класс 
  },
  function() {
    $('.slider_hit').removeClass('show');
    $('.slider_sovet').removeClass('show');
    $('.slider_sale').removeClass('show');
  }
);

//если нажат sovet то, остальные классы не активны

$(document).ready(function() {
  $('.sovet').click(
    function() {
      $('.slider_sovet').addClass('show'); // Добавляем класс 
    },
    function() {
      $('.slider_new').removeClass('show');
      $('.slider_hit').removeClass('show');
      $('.slider_sale').removeClass('show');
    }
  )
});

<ul class="test">
  <li><a href="#" class="hit">Хит продаж</a></li>
  <li><a href="#" class="new">Новинки</a></li>
  <li class="sovet"><a href="#" class="sovet">Советуем</a></li>
  <li class="sale">Акции</li>
</ul>
<div class="slider_hit">Слайдер хит</div>
<div class="slider_new">Слайдер новинки</div>
<div class="slider_sovet">Слайдер советуем</div>
<div class="slider_sale">Слайдер акции</div>

Answer 1

$('.test li').click(
  function() {
    var mySlider = $(this).data("slider");
    $('.slider').not('.' + mySlider).removeClass('show');
    $('.' + mySlider).addClass('show');
    //$('.' + mySlider).toggleClass('show');
  }
);

.slider {
  display:none;
}
.show {
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="test">
  <li data-slider="slider_hit"><a href="#">Хит продаж</a></li>
  <li data-slider="slider_new"><a href="#">Новинки</a></li>
  <li data-slider="slider_sovet"><a href="#">Советуем</a></li>
  <li data-slider="slider_sale">Акции</li>
</ul>
<div class="slider slider_hit">Слайдер хит</div>
<div class="slider slider_new">Слайдер новинки</div>
<div class="slider slider_sovet">Слайдер советуем</div>
<div class="slider slider_sale">Слайдер акции</div>

БЛОГ НА HUSL

Как реализовать по клику добавление класса одному элементу и удаление у другого?

Ответы (1 шт):