jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.css">
<script src="//cdn.jsdelivr.net/jquery.fullpage/2.5.9/vendors/jquery.slimscroll.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.js"></script>
<div id="fullpage">
  <section>
    <div class="container">
      <p>Section1</p>
    </div>
  </section>
  <section>
    <div class="container">
      <p>Section2</p>
    </div>
  </section>
  <section>
    <div class="container">
      <p>Section3</p>
    </div>
  </section>
  <section>
    <div class="container">
      <p>Section4</p>
    </div>
  </section>
  <section>
    <div class="container">
      <p>Section5</p>
    </div>
  </section>
  <section>
    <div class="container">
      <p>Section6</p>
    </div>
  </section>
</div>

SCSS

p {
  font-family: sans-serif;
  font-size: 5em;
}

.container {
  margin: 70px 20px;
}

#fullpage section:nth-child(1){
    background: #fff;
}
#fullpage section:nth-child(2){
    background: #000;
    color: #ffffff;
}
#fullpage section:nth-child(3){
    background: #fff;
}
#fullpage section:nth-child(4){
    background: #000;
    color: #ffffff;
}
#fullpage section:nth-child(5){
    background: #fff;
}
#fullpage section:nth-child(6){
    background: #000;
    color: #ffffff;
}

JavaScript

$(function(){
  $('#fullpage').fullpage({
    sectionSelector: 'section',
    scrollOverflow: true
  });
});