Как нажатой кнопке добавлять класс, а у других убирать?

Question

[nodeLogs]

Как при нажатии на кнопку .showSingle добавлять ей класс, а у других таких же класс убирать?

Codepen

Answer 1

[0xD34F]

Если отвечать ровно на то, что спрошено, тогда

const buttonSelector = '.showSingle';
const activeClass = 'active';
const activeSelector = `${buttonSelector}.${activeClass}`;

$(document).on('click', buttonSelector, e => {
  $(activeSelector).removeClass(activeClass);
  $(e.currentTarget).addClass(activeClass);
});

// или

document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    document.querySelector(activeSelector)?.classList.remove(activeClass);
    t.classList.add(activeClass);
  }
});

Однако, непонятно, почему первая из кнопок не должна получать класс (и почему при клике по ней класс не должен сниматься с предыдущей кнопки). Если вдруг это потому, что её стилизовать не надо как активную, то стили можно цеплять к .active:not(#showall). Также непонятно, зачем делать несколько обработчиков клика для одних и тех же элементов. Так что вот переключение класса у кнопок с одновременным переключением видимости контента:

const contentSelector = '.cnt > div';
const buttonSelector = '.menu > a';
const activeClass = 'active';

const $contents = $(contentSelector);
const $buttons = $(buttonSelector).click(function() {
  const index = $buttons.index(this);
  $buttons.removeClass(activeClass).filter(this).addClass(activeClass);
  (index ? $contents.hide().eq(~-index) : $contents).show();
});

// или

const contents = document.querySelectorAll(contentSelector);
const buttons = document.querySelectorAll(buttonSelector);

buttons.forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  const index = Array.prototype.indexOf.call(buttons, this);
  buttons.forEach(n => n.classList.toggle(activeClass, this === n));
  contents.forEach((n, i) => n.hidden = index && (index - 1 !== i));
});

Answer 2

[nodeLogs]

$('.showSingle').click(function() {  
    $('.showSingle').not(this).removeClass('active');
    $(this).toggleClass('active');
});

Answer 3

[wadowad]

На jQuery вроде так:

$('button').on('click', function() {
  if ($(this).hasClass('showSingle')) {
    $(this).addClass('odin-class');
  } else {
    $('button').removeClass('showSingle');
  }
});