2

Estoy realizando un menú sencillo, quiero que se quede seleccionado el elemento del menú en donde haga click. Tengo mi clase activo y mi codigo de con removeClass y addClass.

Al parecer todo bien, pero cuando doy click sobre el elemento del menú, se aplica la clase activo (un borde debajo de las letras) pero inmediatamente se quita, desaparece, solo está visible lo que dura el click.

$(document).ready(function(){
      $('.menu nav a').click(function(){
        $('nav a').removeClass("activo");
        $(this).addClass("activo");
      });
    });
.activo {
        border-bottom: 10px solid white;
    } 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
        <nav>
            <a href="Inicio.php">Inicio</a>
            <a href="Mision.php">Mision</a>
            <a href="Vision.php">Vision</a>
            <a href="Nosotros.php">Nosotros</a>
            <a href="Contacto.php">Contacto</a>
        </nav>
    </div>

2
  • 1
    Ese problema te ocurre porque la página se vuelve a cargar. Necesitas buscar un modo de persistir la elección del usuario para que cuando la página se vuelva a cargar mantenga la selección. O evaluar en qué página estás para marcar el elemento correcto como activo. La cantidad de posibilidades que hay para hacer esto es inmensa y desde mi punto de vista mejor hacerlo desde la parte del servidor.
    – frikinside
    Commented el 4 may. 2017 a las 17:45
  • Puedes intentar con esta respuesta es.stackoverflow.com/a/30492/12864
    – Dev. Joel
    Commented el 4 may. 2017 a las 17:51

3 respuestas 3

0

Lo que puedes hacer es comprobar la URL en la que se encuentra el usuario y de acuerdo a esto activar el enlace correspondiente.

El código sería algo así:

HTML

<div class="menu">
                <nav>
                    <a href="Inicio.php">Inicio</a>
                    <a href="Mision.php">Mision</a>
                    <a href="Vision.php">Vision</a>
                    <a href="Nosotros.php">Nosotros</a>
                    <a href="Contacto.php">Contacto</a>
                </nav>
              </div>

CSS

.activo {
    border-bottom: 10px solid white;
} 

jQuery

$(document).ready(function(){
    $('.menu nav a').click(function(){
        $('nav a').removeClass("activo");
        $(this).addClass("activo");
    });

    $(".menu nav a").each(function() {
        if($(location).attr('href').indexOf($(this).attr("href")) >= 0)
            $(this).addClass("activo");
    });
});
2
  • Perfecto, muchas gracias, esto me funciono a la perfección. Como apenas vengo empezando en esto supuse que era por la recarga de la pagina pero ni idea de como detectar en cual esta el usuario. Gracias por el apoyo. Saludos. Commented el 4 may. 2017 a las 18:00
  • @RogerDayMexPsy Si la respuesta te ayudo, marcarla como correcta. Commented el 4 may. 2017 a las 18:55
0

Es muy sencillo tienes que crear un pequeño script que modifique la clase del menú de acuerdo a su url:

var pach = www.midominio.com/
var url = $(location).attr('href'); 
var href = url.replace(pach,''); // remplazamos por vacío
$('a[href="'+href+'"]').addClass('activo');
0

También puedes utilizar Cookies o localStorage (ya que al cambiar de página reseteas las variables con Cookies preservas información), presentaré un ejemplo con Cookies. Aunque con estas dos que menciono se almacena la información incluso despues de reiniciar el PC, en cambio Window.sessionStorage Solo es mientras tengas el navegador abierto.

Ejemplo con Coockies:

 $(document).ready(function(){
            textCookie=document.cookie;
            actualPage=textCookie.match(/(?<=actualPage=).+?\b/)[0];
            $('nav a').removeClass("activo");
            $('#'+actualPage).addClass("activo");
          }); 
.activo {
            border-bottom: 10px solid black;
        } 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
        <nav>
            <a id="Inicio" href="Inicio.php" onclick='document.cookie = "actualPage=Inicio";'>Inicio</a>
            <a id="Mision" href="Mision.php" onclick='document.cookie = "actualPage=Mision";'>Mision</a>
            <a id="Vision" href="Vision.php" onclick='document.cookie = "actualPage=Vision";'>Vision</a>
            <a id="Nosotros" href="Nosotros.php" onclick='document.cookie = "actualPage=Nosotros";'>Nosotros</a>
            <a id="Contacto" href="Contacto.php" onclick='document.cookie = "actualPage=Contacto";'>Contacto</a>
        </nav>
    </div>

Parece que stackoverflow no permite modificar cookies, puedes probarlo en local.

Para obtener el valor en cookie he utilizado regex, pero de hecho es más sencillo con las otras opciones: SessionStorage ver más

// Almacena la información en sessionStorage
sessionStorage.setItem('key', 'value');

// Obtiene la información almacenada desde sessionStorage
var data = sessionStorage.getItem('key');

localStorage ver más

localStorage.setItem('miGato', 'Juan');
var cat = localStorage.getItem('miGato');

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.