jQuery addClass example

Change class name on click in jQuery

HTML

<div class="bar">

<a class="logo magick-click" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">HSK.WiKi</a>
 
<form role="text" method="get" id="searchform" action="<?php echo home_url( '/' ) ?>" >

<div class="searchicon">
    <input type="search" name="s" id="s" placeholder=" "  readonly onfocus="this.removeAttribute('readonly')" />
    <div>
        <svg>
            <use xlink:href="#path"/>
        </svg>
    </div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 28" id="path">
        <path d="M32.9418651,-20.6880772 C37.9418651,-20.6880772 40.9418651,-16.6880772 40.9418651,-12.6880772 C40.9418651,-8.68807717 37.9418651,-4.68807717 32.9418651,-4.68807717 C27.9418651,-4.68807717 24.9418651,-8.68807717 24.9418651,-12.6880772 C24.9418651,-16.6880772 27.9418651,-20.6880772 32.9418651,-20.6880772 L32.9418651,-29.870624 C32.9418651,-30.3676803 33.3448089,-30.770624 33.8418651,-30.770624 C34.08056,-30.770624 34.3094785,-30.6758029 34.4782612,-30.5070201 L141.371843,76.386562" transform="translate(83.156854, 22.171573) rotate(-225.000000) translate(-83.156854, -22.171573)"></path>
    </symbol>
</svg>
</form>



  <div class="menuwrap">
    <nav class="menunav">
      <div class="forscroll">
        <a href="#" class="nav__link"><span class="magick-click">Home</span></a>
        <a href="#" class="nav__link magick-click">About</a>
        <a href="#" class="nav__link">Shop</a>
        <a href="#" class="nav__link">Contact</a>
        <a href="#" class="nav__link">Contact</a>
        <a href="#" class="nav__link">Contact</a>
        <a href="#" class="nav__link">Contact</a>
        <a href="#" class="nav__link">Contact</a>
        <a href="#" class="nav__link">Contact</a>
        <a href="#" class="nav__link">Contact</a>
        <a href="#" class="nav__link">Contact</a>
        <a href="#" class="nav__link">Contact</a>
        <a href="#"...

CSS

@charset "UTF-8";

	@font-face {
			font-family: "Merriweather";
			src: url("/fonts/MerriweatherBI/MerriweatherBoldItalic.eot");
			src: url("/fonts/MerriweatherBI/MerriweatherBoldItalic.eot?#iefix")format("embedded-opentype"),
			url("/fonts/MerriweatherBI/MerriweatherBoldItalic.woff") format("woff"),
			url("/fonts/MerriweatherBI/MerriweatherBoldItalic.ttf") format("truetype");
			font-style: italic;
			font-weight: 700;
	}

    @font-face {
			font-family: "Open Sans";
			src: url("/fonts/OpenSansR/OpenSans-Regular.eot");
			src: url("/fonts/OpenSansR/OpenSans-Regular.eot?#iefix")format("embedded-opentype"),
			url("/fonts/OpenSansR/OpenSans-Regular.woff") format("woff"),
			url("/fonts/OpenSansR/OpenSans-Regular.woff2") format("woff2"),
			url("/fonts/OpenSansR/OpenSans-Regular.ttf") format("truetype");
			font-style: normal;
			font-weight: normal;
	}
	

body {margin: 0;
    --body-background-color: #F8FAFF;
    --text-color: #312c29;
    --bubble-color: #ff0081;
    color: var(--text-color);
    background: var(--body-background-color);
    overflow-x: hidden;
    display: flex;
    min-height: 1400px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 300;
}

.site {
    width: 100%;
}
.site-header {
    height: 40px;
}

.bar {display: block;
    min-height: 40px;
    position: fixed;
    top: 0;
    width: 100%;}
.bar::before{
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    -webkit-box-shadow: 0 13px 30px 40px var(--body-background-color);
    -moz-box-shadow: 0 13px 30px 40px var(--body-background-color);
    box-shadow: 0 13px 30px 40px var(--body-background-color);
}
.bar > a {
    outline: 0;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 21px;
    float: left;
    height: 34px;
    text-align: center;
    padding: 6px 10px 0 10px;
    text-decoration: none;
    position: relative;
    color:...