1

estoy desarrollando un sitio web, y tengo problemas con el menú, quisiera que la opción elegida se quede activa; he intentado varias cosas con js, funciona cuando se coloca ahref="#"; pero cuando le añado una página distinta, no funciona; he podido detectar que (disculpe la ignorancia al respecto) el jscript se vuelve a ejecutar cuando se da clic a algún enlace por lo que toma como activo el enlace por defecto. Ya probé quitando el valor activo al correspondiente valor (li); y sigue sin funcionar.

Este es el código en mención, el cual lo encontré en Internet

        <ul class="sidemenu" id="sidemenu">
            <li id="index" class="active"><a href="index">Inicio</a></li>
            <li id="privacy"><a href="/privacy">Privacy</a></li>
            <li><a href="#">Inscribirse a Curso</a></li>
        </ul>

JS

  $('.sidemenu li').on('click', function () {
   $('li.active').removeClass('active');
$(this).addClass('active');
});`

CSS

    .active {
    background-color: #A0A0A0;
    }`

El proceso es el siguiente cuando se selecciona el menú, entonces toma inicialmente el link elegido, luego al cargar el destino; vuelve a cargar la cabecera donde están los menús; y el activo vuelve ser el por defecto; y ese queda resaltado.

PD. Estoy usando los archivos _layout.cshtml, site.css y site.js

1
  • Bienvenido a Stack Overflow en español! Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    el 11 feb. 2020 a las 18:41

1 respuesta 1

0

Creo que algo asi te puede servir:

https://codesandbox.io/s/tender-swirles-r9cje

// Obtienes todos los links del menu con la clase .sidemenu
var items = document.querySelectorAll(".sidemenu__item a");

// Recorres cada uno de los links
items.forEach(function(item) {
  // Si la url del link es igual a la url actual del navegador
  // entonces a ese link se le coloca la clase .active
  if (item.href === document.URL) {
    item.className = "active";
  }
});
a {
  color: black;
}

a.active {
  color: red;
}
<ul class="sidemenu">
  <li class="sidemenu__item">
    <a href="/">Inicio</a>
  </li>
  <li class="sidemenu__item">
    <a href="/privacy">Privacy</a>
  </li>
  <li class="sidemenu__item">
    <a href="/inscribirse-curso">Inscribirse a Curso</a>
  </li>
</ul>

1
  • Sí, me ayuda bastante, porque la respuesta resalta la selección hecha, ya el fondo de la selección hecha, si lo quiero cambiar, ya no es complicado; la idea es que funciona de acuerdo a lo que necesito. Muchas gracias.
    – Alexis
    el 11 feb. 2020 a las 19:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.