Color Doesn't Change At Active Dot In Vertical Dot Navigation

I implemented vertical dot navigation. (1)The problem is the active dot's color is not changed to white. Just the first one is kept with white color though it is not active as show

Solution 1:

Removed class='vNav' from UL tag.

changed background to red for active link, as I could not place the link dots above black background.

css:

.vNava.active {
        border-radius: 50%;
        background-color: #ff0000;
        text-decoration: none;
    }

Javascript:

<script>
        $(document).ready(function ($) {
            $('.vNav > ul > li > a').click(function() {
                $('.vNav > ul > li > a').removeClass();
                $(this).addClass('active');
            });

        });
        </script>

Solution 2:

Finally I can manage to make the things work. My solution is as follow. HTML

<navid="cd-vertical-nav"><ul><li><adata-number="1"href="#section1"class="is-selected"><spanclass="cd-dot"></span><spanclass="cd-label">Landed</span></a></li><li><adata-number="2"href="#section2"class=""><spanclass="cd-dot"></span><spanclass="cd-label">Apartment</span></a></li><li><adata-number="3"href="#section3"class=""><spanclass="cd-dot"></span><spanclass="cd-label">Condominium</span></a></li><li><adata-number="4"href="#section4"class=""><spanclass="cd-dot"></span><spanclass="cd-label">Commercial</span></a></li><li><adata-number="5"href="#section5"><spanclass="cd-dot"></span><spanclass="cd-label">Farm</span></a></li></ul></nav><divclass="col-sm-9"><divid="section1"><h1class="header">Landed</h1></div><divid="section2"><h1class="header">Apartment</h1></div><divid="section3"><h1class="header">Condominium</h1></div><divid="section4"><h1class="header">Commercial</h1></div><divid="section5"><h1class="header">Farm</h1></div></div>

CSS

#cd-vertical-nav {
  position: absolute;
  right: 4%;
  top: 65%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}
#cd-vertical-navli {
  text-align: right;
  list-style:none;
}
#cd-vertical-nava {
  display: inline-block;
  /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#cd-vertical-nava:after {
  content: "";
  display: table;
  clear: both;
}
#cd-vertical-navaspan {
  display: inline-block;
  float: right;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
}
#cd-vertical-nava:hoverspan {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
#cd-vertical-nava:hover.cd-label {
  opacity: 1;
}
#cd-vertical-nava.is-selected.cd-dot {
  background-color: white;
}
#cd-vertical-nav.cd-dot {
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #d88683;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
  -moz-transition: -moz-transform 0.2s, background-color 0.5s;
  transition: transform 0.2s, background-color 0.5s;
  -webkit-transform-origin: 50%50%;
  -moz-transform-origin: 50%50%;
  -ms-transform-origin: 50%50%;
  -o-transform-origin: 50%50%;
  transform-origin: 50%50%;
}
#cd-vertical-nav.cd-label {
  position: relative;
  margin-right: 10px;
  padding: .4em .5em;
  color: white;
  font-size: 14px;
  font-size: 0.875rem;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
  -webkit-transform-origin: 100%50%;
  -moz-transform-origin: 100%50%;
  -ms-transform-origin: 100%50%;
  -o-transform-origin: 100%50%;
  transform-origin: 100%50%;
}


h1.header{
    color: green;
    text-align: center;
    font-size: 1em;
}
div.col-sm-9div {
      height: 500px;
      font-size: 18px;

}

#section1 {color: #fff; background-color: #1E88E5;}
#section2 {color: #fff; background-color: #673ab7;}
#section3 {color: #fff; background-color: #ff9800;}
#section4 {color: #fff; background-color: #00bcd4;}
#section5 {color: #fff; background-color: #009688;}

JAVASCRIPT

<script>
$('a').click(function () {
        $('a').removeClass('is-selected');
        $(this).addClass('is-selected');
    });
</script>