jQuery addClass example

Change class name on click in jQuery

by Diman0o

HTML

<tr>
  <td>


<table width="100%" cellspacing="0" cellpadding="0">
  <tbody>
  <tr>
    <td class="es-m-p0r es-m-p20b esd-container-frame" width="560" valign="top" align="center">
      <table width="100%" cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
          <td class="es-m-p20b esd-container-frame" style="margin-bottom: 0; padding: 0 10px; position: absolute;
              left: 15px;
              top: 0;
              z-index: 1;" width="70" align="left">
              <div class="price-wrap" style="    color: #333333;
                  background: #f9059a;
                  background-color: rgba(255,255,255,0.902);
                  float: left;
                  height: 60px;
                  margin-right: 0;
                  padding-top: 10px;
                  text-align: center;
                  width: 70px;">
                <p class="price-value">
                  <span>$</span>
                  <span class="ng-binding">2945</span>
                </p>
                <p class="per-month"style="    color: #6c6c6c;
                    font-size: 13px;
                    line-height: 16px;
                    margin-bottom: 0;">per month</p></div>
              <div class="desc" ng-show="[null, 'internal'].indexOf(listing.source_type) !== -1" style="color: #4a4a4a;
                  background: rgba(248,248,248,0.902);
                  float: left;
                  height: 60px;
                  margin-right: 0;
                  padding: 5px;
                  text-align: center;
                  width: 100px;">
                <span ng-show="listing.availability_detail.available_now" class="ng-hide"><p class="available-from-label ng-hide" ng-show="listing.availability_detail.available_now">Available</p><p class="available-from-value ng-hide" ng-show="listing.availability_detail.available_now">Now</p></span><span ng-hide="listing.availability_detail.available_now"><p class="available-from-label"...

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")
})