How do I change the active class to the pressed li?

<div class="collapse navbar-collapse navbar-ex1-collapse">
                 <ul class="nav navbar-nav navbar-right">
                   <li class="active"><a href="#juk">About</a></li>
                   <li><a onclick="myFunction1()">Development</a></li>
                   <li><a href="http://docs.kde.org/stable/en/kdemultimedia/juk/index.html">Wiki/Documentation</a></li>
                   <li><a onclick="myFunction()">Screenshots</a></li>
                   <li class="dropdown">
                     <a data-toggle="dropdown" class="dropdown-toggle" href="#">Releases class="caret"></a>
                     <ul class="dropdown-menu">
                       <li><a href="ftp://ftp.kde.org/pub/kde/stable/latest">JuK Latest</a></li>
                       <li><a href="http://developer.kde.org/~wheeler/files/src/juk-1.95a.tar.gz">JuK 1.95</a></li>
                       <li><a href="http://developer.kde.org/~wheeler/files/src/juk-1.1.tar.gz">JuK 1.1</a></li>
                       <li><a href="http://developer.kde.org/~wheeler/files/src/juk-1.0-1.tar.gz">JuK 1.0</a></li>
                     </ul>
                   </li>
                   <li><a href="#contactus">Contact Us</a></li>
                 </ul>
               </div>

$(function() {
      $( 'ul.nav.navbar-nav.navbar-right li' ).on( 'click', function() {
            $( this ).parent().find( 'li.active' ).removeClass( 'active' );
            $( this ).addClass( 'active' );
      });
});