No puedo agregar la clase active

[RSmith]

Hola buenos días,
Busque mucho en Internet sobre como agregar la clase active a un menu. Probe varios códigos que están en Internet pero ninguno funcionaba, trate de hacerlo yo solo desde cero pero tampoco funciona y la verdad no entiendo porque. La lógica es simple, agregar la clase active al botón que se selecciona, pero algo estoy haciendo mal y no me doy cuenta. Si yo tengo este menu usando de base bootstrap:

Código HTML:

<div class="navbar-collapse nav-main-collapse collapse">
    <div class="container">
        <nav id="menu" class="nav-main mega-menu">
            <ul id="mainMenu" class="nav nav-pills nav-main">
                <li><a href="#">link 1</a></li>
                <li><a href="#">link 2</a></li>
                <li><a href="#">link 3</a></li>
                <li class="dropdown mega-menu-item">
                    <a class="dropdown-toggle" href="#">
                        link 4
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">link 4.1</a></li>
                        <li><a href="#">link 4.2</a></li>
                        <li><a href="#">link 4.3</a></li>
                        <li><a href="#">link 4.4</a></li>
                        <li><a href="#">link 4.5</a></li>
                    </ul>
                </li>
                <li><a href="#">link 5</a></li>
                <li><a href="#">link 6</a></li>
                <li><a href="#">link 7</a></li>
            </ul>
        </nav>
    </div>
</div> 

Lo que yo creo que hay que hacer es seleccionar el "li" y capturar el evento cuando se hace clic, y si se le hace clic agregar le la clase active. Para hacer esto lo que estoy haciendo es esto:

Código:

$(document).ready(function(){
    $('#menu li').click(function(){
        $('#mainMenu li').removeClass('active');
        $(this).addClass('active');
    });
});

La otra duda que me surge es, al agregarle la clase active y se recargue la pagina (por ejemplo al pasar de la pagina "link 1" a la pagina "link 2") no se eliminaria la clase active ?
Se que hay muchos temas sobre esto pero la verdad que estoy probando hace 2 dias y no logro que ande. Alguien me puede ayudar ?

[fede10]

proba con esto

Código Javascript:

$(document).ready(function(){
    $('#mainMenu li a').click(function(){
        $('#mainMenu li').removeClass('active');
        $(this).parent().addClass('active');
    });
    
});
 

[RSmith]

Hola fede10, gracias por responder.
Me di cuenta que el problema son los href.. por ejemplo, si los href del menu los dejo asi:

Código HTML:

<li><a href="#">link 1</a></li> 

En ese caso si me anda, pero si por el contrario lo hago asi:

Código HTML:

<li><a href="alguna_pagina.html">link 1</a></li> 

En ese caso no anda. Es decir, como que se elimina la clase al recargar la pagina. ya nose que hacer