jQuery addClass example

Change class name on click in jQuery

by vikasguptaa9

HTML

<div class="contact">
        <div class="box"></div>
        <div class="box1"></div>
        <div class="box2"></div>
 </div>

CSS

.box{
    margin: 0 auto;
    margin: 5em;
    float: left;
    width: 180px;
    height: 180px;
    background: skyblue;
}
.box1{
    margin: 0 auto;
    margin: 5em;
    float: left;
    width: 180px;
    height: 180px;
    background: red;

}
.box2{
    margin: 0 auto;
    margin: 5em;
    float: left;
    width: 180px;
    height: 180px;
    background: orange

 }
 .contact{
   display: inline-flex;
 }

JavaScript

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

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