jQuery addClass example

Change class name on click in jQuery

by Asif Sharif Shahid

HTML

<header class="nav">
    <nav class="buttons">
        <div class="button-holder">
            <a class="buttons-a active" href="#panel1div">•</a>
            <a class="buttons-a" href="#panel2div">•</a>
            <a class="buttons-a" href="#panel3div">•</a>
            <a class="buttons-a" href="#panel4div">•</a>
        </div>
    </nav>
</header>

<section id="paneldivs">
    <article id="panel1div" class="panel1 panels">
        <h1>Panel 1</h1>
    </article>

    <article id="panel2div" class="panel2 panels">
        <h1>Panel 2</h1>
    </article>

    <article id="panel3div" class="panel3 panels">
        <h1>Panel 3</h1>
    </article>
    <article id="panel4div" class="panel4 panels">
        <h1>Panel 4</h1>
    </article>
</section>

CSS

* {
    padding: 0px;
    margin: 0px;
    outline: none;
}

body {
    overflow-y: hidden;
}

h1 {
    padding: 50vh 0;
    font-size: 40px;
}

.buttons {
    width: 30px;
    position: fixed;
    right: 0px;
    z-index: 999;
}

.button-holder {
    height: 100vh;
    display: table-cell;
    vertical-align: middle;
}

.buttons a {
    display: block;
    text-decoration: none;
    font-size: 50px;
    color: #000;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

a.active {
    color: #999;
}

li {
    list-style: none;
}

.panels {
    float: left;
    width: 100%;
    text-align: center;
    height: 100vh;
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.panel1 {
    background: #ccc;
}

.panel2 {
    background: #ff0;
}

.panel3 {
    background: #ddd;
}

.panel4 {
    background: #0ff;
}

JavaScript

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

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