jQuery addClass example

Change class name on click in jQuery

by abuhamzah

HTML

<html>
   
   <head>
   
      
    
      <link href="/static/bootstrap/dist/css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
      <link href="/static/font-awesome/css/font-awesome.min.css?cache_version=2" rel="stylesheet">
      <link href="/static/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet">
      <link rel="stylesheet" href="/static/CACHE/css/840dbc21f0ab.css" type="text/css">
      <link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
      <script type="text/javascript" src="/static/CACHE/js/552cba795668.js"></script>
      <script src="/static/jquery/dist/jquery.min.js?v=3.3.1"></script>
      <script src="/static/jquery.cookie/jquery.cookie.js"></script>
      <script src="/static/jquery-sticky/jquery.sticky.js"></script>
      <script src="/static/clipboard/dist/clipboard.min.js"></script>
      <script src="/static/sweetalert2/dist/sweetalert2.min.js"></script>
      <script>
         $(document).ready(function(){
           $('.sticky').sticky({topSpacing:0});
         });
         
         
         
       
      </script>
      <script src="/static/angular/angular.min.js"></script>
      <script src="/static/jquery-ui-dist/jquery-ui.min.js"></script>
      <script src="/static/noty/lib/noty.min.js"></script>
   
      
      </div>
   </body>
</html>

JavaScript

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

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