jQuery addClass example

Change class name on click in jQuery

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>

    <script src='//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js'></script>
    <script src='https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js'></script>
    <script src='https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js'></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>
<table id="ressourceTable" class="display" style="width: 100%; text-align: left;">
        <thead>
            <tr>
                <th></th>
                <th>Theme Name</th>
                <th>Speed</th>
                <th>Price</th>
                <th>Foundation</th>
                <th>Page Load Time (Seconds)</th>
                <th>Link</th>
                <th>Instagram Feed</th>
                <th>Announcement Bar</th>
                <th>Social Media Sharing</th>
                <th>Custom Popup</th>
                <th>Testimonials</th>
                <th>Twitter Feed</th>
                <th>Newsletter</th>
                <th>Auto Currency</th>
                <th>Blog</th>
                <th>Hero</th>
                <th>Slideshow</th>
                <th>Video</th>
                <th>Gallery</th>
                <th>Reviews</th>
                <th>Lookbook</th>
                <th>Store Location</th>
                <th>Theme Features</th>


            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Theme Name</th>
                <th>Speed</th>
                <th>Price</th>
                <th>Foundation</th>
                <th>Page Load Time (Seconds)</th>
                <th>Link</th>
                <th>Instagram Feed</th>
               ...

CSS

body {
  /*background: #20262E;*/
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})