Set class active on click navigation link

I need help setting a link as active upon clicking on my html top nav bar.

The nav bar looks like this

   <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
    <ul class="nav navbar-nav">
      <li>
          <a href="">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Clients <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="">Add New Client</a></li></i></a></li>
          </ul>
      </li>
    </ul>
   </div>

So when i click Home it must highlight Home when i click on Clients it must highlight Clients. I really don't know how to achieve this so any help will be very much appreciated.

via Chebli Mohamed