jQuery addClass example

Change class name on click in jQuery

by Cupidvogel

HTML

<div class = 'atomicPerfUnit'>
<div class = 'perfBattingHeader'>

</div>

</div>

CSS

.atomicPerfUnit {
  font-family: sans-serif;
  width: 490px;
background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
  border-radius: 4px;
  height: 80px;
  border: 1px solid #aeaeae;
}

.perfBattingHeader {
  width: 100%;
  height: 30px;
  background: yellow;
}

JavaScript

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

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