estoy intentando de que cambie la propiedad active de la etiqueta a en mi menú, pero cuando doy click me cambia la propiedad pero automáticamente vuelve todo como estaba, El proyecto lo estoy realizando en Symfony y plantillas twig. Y quisiera agregarle el cambio de color en el menu para evitar que se pierdan en el sistema. les dejo el código como esta en el proyecto.
nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Procesos
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview" id="menu">
<li class="nav-item">
<a href="{{ path('archivo_index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Planificación</p>
</a>
</li>
<li class="nav-item">
<a href="{{ path('medicion_index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Medición y Análisis</p>
</a>
</li>
<li class="nav-item">
<a href="{{ path('investigacion_index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Investigación y Desarrollo</p>
</a>
</li>
<li class="nav-item">
<a href="{{ path('compras_index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Compras</p>
</a>
</li>
<li class="nav-item">
<a href="{{ path('produccion_index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Producción de Inyectables</p>
</a>
</li>
<li class="nav-item">
<a href="{{ path('yogurt_index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Producción de Yogurt</p>
</a>
</li>
<li class="nav-item">
<a href="{{ path('capitalh_index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Capital Humano</p>
</a>
</li>
</ul>
</li>
</ul>
Este es el Script
$('li a').click(function(e) {
//e.preventDefault();
var $this = $(this);
$this.closest('ul').find('li.active,a.active').removeClass('active');
$this.addClass('active');
$this.parent().addClass('active');
});
En espera de alguna solución