After clicking, the active class remains on the original "li" instead of changing as it should. I've tried modifying the code but haven't been able to find a solution. Can someone please review what I might have missed? It seems like there's something specific to my code that I'm missing. I looked into "adding/removing an active class for UL list with jQuery," but that didn't solve the issue. Any help in pinpointing the error in my code would be greatly appreciated.
HTML:
<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 </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>
JavaScript:
$(function() {
( 'ul.nav.navbar-nav.navbar-right li' ).on( 'click', function() {
$( this ).parent().find( 'li.active' ).removeClass( 'active' );
$( this ).addClass( 'active' );
});
});