jQuery addClass example

Change class name on click in jQuery

by park kyungdoo

HTML

<ul class="items">
  <li>아이템1</li>
  <li>아이템2</li>  
  <li>아이템3</li>
  <li>아이템4</li>  
  <li>아이템5</li>
  <li>아이템6</li>    
</ul>

SCSS

.items {
  li {
    &.is-active {
      background-color: red;
    }
  }
}

JavaScript

$('.items li').on('click', function() {
const isActived = $(this).hasClass('is-active');

$('.items li').removeClass('is-active')

!isActived ? $(this).addClass('is-active') : $(this).removeClass('is-active')
})