jQuery addClass example

Change class name on click in jQuery

by bryiantan

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>

CSS

li.active {color:red}
.clear {color:inherit}

JavaScript

$(function() {
      $( 'ul.nav.navbar-nav.navbar-right li' ).on( 'click', function(e) {
            /*$( this ).parent().find( 'li.active' ).removeClass( 'active' );   
             // $(this).find("li").addClass('active');                  
           $( this ).addClass( 'active' );*/
            
           $(this).parents().find('li.active').removeClass('active');
           $( this ).first().not("ul").addClass( 'active' );
           $( this ).children('ul').addClass('clear');
           e.stopPropagation();
      });
});