Change style of two buttons based on active or not with jQuery

by Al-Mamun Talukder

HTML

<div class="buttons">
  <a class="active" href="#">Annual Pricing</a>
  <a href="#">Monthly Pricing</a>
  <p>The active button is white and inactive button is black</p>
</div>

CSS

a {
  text-decoration: none;
  color: #fff;
  background-color: #000;
  padding: 5px 10px;
  display: inline-block;
}

.active {
  color: #000;
  background-color: #fff;
}

JavaScript

$(document).ready(function() {
  $('.buttons a').on('click', function() {
    $('.buttons a').removeClass('active');
    $(this).addClass('active');
  });
});