class active not working on page

Question

I know this question comes across a lot, but I just can't figure out how to do this using the, already answered posts. Here I am having different menus on a single page. When I click on each menu I want that menu to be active but here it's not working.

This is my view page:

<ul class="nav navbar-nav navbar-right">
  <li class="active"> <a class="page-scroll" href="<?php echo base_url();?>nowaste_control/index#about">About</a> </li>
  <li class=""><a class="page-scroll" href="<?php echo site_url('nowaste_control/index#product'); ?>">Products</a> </li>
  <li  class=""> <a class="page-scroll" href="<?php echo base_url();?>nowaste_control/index#technology">Technology</a> </li>
</ul>

This is my jQuery:

<script type="text/javascript">
$('.nav navbar-nav li a').click(function($) {
  $('a[href="'+window.location.pathname+window.location.hash+'"]').parent().addClass('active');
});
</script>

Answer 1

Here is a sample way to do it. By the way. since i cannot have a snippet of you html code for the navigation list i just created a simple one

here is the html i created

<div class="nav">
  <li class="active"> <a class="page-scroll" href="#about">About</a> </li>
  <li class=""><a class="page-scroll" href="#product">Products</a> </li>
  <li  class=""> <a class="page-scroll" href="#technology">Technology</a> </li>
</div>

here is the javascript

$(document).ready(function(){
  $(document).on('click', '.nav li a', function () {
    console.log($(this));
    $('.active').removeClass('active');
    $(this).parent().addClass('active');
  });
});

DEMO