He agregado una clase active a través de jquery cada vez que el usuario hace clic en los menús de navegación. ¿Cómo agrego otra check de clase cada vez que el usuario hace clic en el menú?

El comportamiento de mis menús sería como menús paso a paso. Por ejemplo, cuando el usuario hace clic en la test 1 , activará el li . Y cuando el usuario haga clic en Test 2 , se activará y el menú anterior será reemplazado por la clase de check .

Como esta imagen de ejemplo de arriba.

Este es mi código jquery. ¿Alguien tiene alguna idea de cómo modificar el código Jquery para realizar lo anterior?

HTML

 <nav id="sidebar" class="get-qoute-sidebar"> <ul class="menus"> <li class="active"> <a href="#"><span>Test 1</span></a> </li> <li> <a href="#"></i><span>Test 2</span></a> </li> <li> <a href="#"><span>Test 3</span></a> </li> <li> <a href="#"><span>Test 4</span></a> </li> <li> <a href="#"><span>Test 5</span></a> </li> <li> <a href="#"><span>Test 6</span></a> </li> <li> <a href="#"><span>Test 7</span></a> </li> </ul> </nav>

jquery

 $(document).ready(function () { //load the functions activeSideBar(); }); function activeSideBar() { // set active classes on side bar nav li a $("body").on("click", 'nav#sidebar.get-qoute-sidebar ul li a', function (e) { $('nav#sidebar.get-qoute-sidebar ul li.active').removeClass('active'); var $parent = $(this).parent(); $parent.addClass('active'); e.preventDefault(); }); }