jQuery addClass example

Change class name on click in jQuery

by peeebeee

HTML

<!DOCTYPE html>

<html>

  <head>

    <title>NCM Station Mapper</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="images/favicon-32x32.png">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      #map {
        width: 600px;
        height: 400px;
      }

      #stations {
        position: absolute;
        top: 80px;
        left: 10px;
        border: 2px solid green;
        background-color: white;
        z-index: 400;
        /* Must be over 400 to be visible */
      }

    </style>

    <style>
      body {
        padding: 0;
        margin: 0;
      }

      #map {
        height: 100%;
        width: 100vw;
      }

    </style>
  </head>

  <!-- Map1 is the starting map in the development cycle, it works, copy this before making changes -->

  <body>

    <!-- the map div holds the map -->
    <div id="map"></div>
    <div id="stations">
      <!-- the stations div holds a list of the stations marked on the map -->
      <b style="color:red; text-decoration: underline;">Net #886</b><br><a id='marker_1' href='#'>N0SAX</a><br><a id='marker_2' href='#'>KF0ED</a><br><a id='marker_3' href='#'>KD0ZMG</a><br><a id='marker_4' href='#'>KC0NOX</a><br><a id='marker_5' href='#'>AA0JA</a><br>
      <a
        id='marker_6' href='#'>AC0OK</a><br><a id='marker_7' href='#'>KG6TUB</a><br><a id='marker_9'...

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