Hello there I have this code and I want to display active links in purple. I have that in a js file however, does not seem to work as expected. I am not sure where exactly I am doing wrong. Everything else is working properly but when you clink a link it fails to highlight to purple as is in the css. I have provided the necessary code only, Anyone? 

**html**

```html
<html>
  <head>
    <link href="site.css" rel="stylesheet">   <script src="color.js"></script>
  </head>
  <body>
    <div class="nav-container">
      <ul class="navigation-menu">
        <li><a href='start.php'>Home</a></li>
        <li><a href='pay.php'>C2B Payments</a> </li>
        <li><a href='sms.php'>C2B SMS</a></li>
        <li><a href='#'>B2C Payments</a>
          <ul>
            <li><a href="getbtc.php"> B2C Payments</a></li>
            <li><a href="payment.php"> Make Payments</a></li>
          </ul>
        </li>
        <li><a href='bsms.php'>B2C SMS</a></li>
        <li><a href='index.php'>Log Out</a></li>
      </ul>
    </div>
  </body>
</html>

```

**css (site.css)**

```css
.navigation-menu li.active a {
  background-color: purple;
  color:#fff;
}
.navigation-menu li ul {
  display: none;
}

.navigation-menu li a:hover{
  background-color:black;
  color: white;
}
.navigation-menu li a.active {
  background-color: purple;
  color:#fff;
}

```

**javascript (color.js)**

```js
$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
  });
});

```