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:

        .vNav a.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

<nav id="cd-vertical-nav">
        <ul>
            <li>
                <a data-number="1" href="#section1" class="is-selected">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Landed</span>
                </a>
            </li>
            <li>
                <a data-number="2" href="#section2" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Apartment</span>
                </a>
            </li>
            <li>
                <a data-number="3" href="#section3" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Condominium</span>
                </a>
            </li>
            <li>
                <a data-number="4" href="#section4" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Commercial</span>
                </a>
            </li>
            <li>
                <a data-number="5" href="#section5">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Farm</span>
                </a>
            </li>

        </ul>
</nav>
<div class="col-sm-9">
      <div id="section1">    
        <h1 class="header">Landed</h1>

      </div>
      <div id="section2"> 
        <h1 class="header">Apartment</h1>

      </div>
      <div id="section3">         
        <h1 class="header">Condominium</h1>

      </div>

      <div id="section4">         
        <h1 class="header">Commercial</h1>

      </div> 

      <div id="section5">        
        <h1 class="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-nav li {
  text-align: right;
  list-style:none;
}
#cd-vertical-nav a {
  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-nav a:after {
  content: "";
  display: table;
  clear: both;
}
#cd-vertical-nav a span {
  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-nav a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
#cd-vertical-nav a:hover .cd-label {
  opacity: 1;
}
#cd-vertical-nav a.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-9 div {
      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>