activar enlace al hacer click

[pilucho]

Hola Amigos del Foro.

Tengo el siguiente problema, el código funciona, pero no logro que se active los enlace seleccionado con dicho color,
es decir si hago click en alguno de los ITEMS debería quedar seleccionado que indica donde esta activado
el problema puede estar en el JAVASCRIPT.

Código Javascript:

<script>
let navigation = document.querySelector('.navigation'); 
let list = document.querySelectorAll(".navigation li");
function activeLink() {
  list.forEach((item) => {
    item.classList.remove("hovered");
  });
  this.classList.add("hovered");
}
list.forEach((item) => item.addEventListener("click", activeLink));
</script>
 

Código HTML:

<!-- AdminLTE -->
  <aside class="main-sidebar navigation">
    <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Item 1 -->
          <li class="nav-item">
            <a href="mylink.php" class="nav-link">
              <p>Item 1</p>
            </a>
          </li>
          <!-- Item 2 -->
          <li class="nav-item">
            <a href="mylink.php" class="nav-link">
              <p>Item 2</p>
            </a>
          </li>
          <!-- Item SubMenu -->
          <li class="nav-item">
            <a href="#" class="nav-link">
                <p>Item SubMenu</p>
            </a>
            <ul class="nav nav-treeview" style="display: none;">
              <li class="nav-item">
                <a href="mylink.php" class="nav-link">
                  <p>Item SubMenu 1</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="mylink.php" class="nav-link">
                  <p>Item SubMenu 2</p>
                </a>
              </li>
            </ul>          
          </li><!-- .Item SubMenu -->
        </ul>
    </nav><!-- .mt-2 -->
  </aside>
 

Código CSS:

<style>
.navigation {
  background: var(--blue);
  overflow: hidden;
}
.navigation ul {
  top: 0;
  left: 0;
}
.navigation ul li {
  list-style: none;
  color: var(--blue);
}
.navigation ul li:hover,
.navigation ul li.hovered {
  background-color: var(--white);
}
 
.navigation ul li a {
  color: var(--blue);
}
.navigation ul li:hover a p,
.navigation ul li.hovered a p {
  color: var(--blue);
}    
</style>
 

[pzin]

Funciona bien. La clase se añade/quita según se pulsa.

El problema estará en el CSS. ¿Has declarado las variables esas de color?

[pilucho]

Iniciado por pzin

Funciona bien. La clase se añade/quita según se pulsa.

El problema estará en el CSS. ¿Has declarado las variables esas de color?

Funciona el HOVER.. si le das clic a un enlace se queda activado en dicho enlace pero si pasas el MOUSE el HOVER se mueve en los enlaces que vayas pasando.. mas no se queda fijo en el enlace seleccionado.

revísalo bien por favor a ver si me das una mano para solucionarlo