Esta es una pregunta bastante simple. Pero no he podido arreglarlo. Creé este sitio web de laboratorio: http://www-plb.ucdavis.edu/Labs/sundar/ Quiero que el botón de navegación "Inicio" se vuelva dorado cuando se carga la página, sin necesidad de hacer clic en el botón.

Escribí una función JQuery para asignar una clase que haga que la página actual en la navegación sea de color dorado como se muestra a continuación. Pero esto ocurre solo al hacer clic. Quiero que la clase activa se asigne en carga. ¡Gracias!

$(document).ready(function(){
    $('#nav a').each(function(index) {
        if(this.href.trim() == window.location)
            $(this).addClass("active");
    });
});
0
Deepa Thalikar 31 ago. 2014 a las 06:43

2 respuestas

La mejor respuesta

La razón por la cual su botón 'Inicio' no se vuelve dorado en la carga de la página es porque el enlace para ese botón es http://www-plb.ucdavis.edu/Labs/sundar/index.html mientras que la página actual es http://www-plb.ucdavis.edu/Labs/sundar/, por lo que falla la comprobación de this.href.trim() == window.location.

Puede solucionar esto cambiando el enlace para el botón Inicio de

<a href="index.html">Home</a>

Para

<a href="http://www-plb.ucdavis.edu/Labs/sundar/">Home</a>
1
FuzzyTree 31 ago. 2014 a las 03:01
$('#nav a').each(function(index) {
    console.log(this.href.trim());
    console.log(window.location.toString());
});

Si ejecuto el código en http://www-plb.ucdavis.edu/Labs/sundar /

http://www-plb.ucdavis.edu/Labs/sundar/index.html

http://www-plb.ucdavis.edu/Labs/sundar/

...

Si ejecuto el código en 'Inicio' (http: // www-plb. ucdavis.edu/Labs/sundar/index.html)

http://www-plb.ucdavis.edu/Labs/sundar/index.html

http://www-plb.ucdavis.edu/Labs/sundar/index.html

...

Entonces, simplemente tienes un código incorrecto.

¿Por qué no pones la clase active en cada html manualmente?

0
Community 20 jun. 2020 a las 09:12