¿Cómo puedo obtener jQuery o Javascript para cambiar css en función de la URL actual?

Tengo un área de navegación en un archivo separado de mi contenido, y junté los dos usando un php include. Quiero que los enlaces del área de navegación cambien de color en función de la página que esté activa, es decir, la URL actual. Por lo tanto, quiero que jQuery o Javascript lean la URL actual (en realidad solo el nombre del archivo, como home.html), y luego escriba CSS en función de eso.¿Cómo puedo obtener jQuery o Javascript para cambiar css en función de la URL actual?

Así como, si url = home.html, cambio de CSS para nav.home.background-> azul

Fuente

2011-09-27 Jono

Solo un pensamiento, pero ¿hay alguna razón para hacer esto con javascript sobre PHP? PHP ofrecería una solución compatible con el navegador (p. Ej., No se vería afectado por los usuarios que desactivasen javscript, etc.) – n00dle

¿puede seleccionar una respuesta? – hunter

En su situación, podría intentar algo como esto:

$("A").each(function() { 
    if (this.href == document.URL) { 
     $(this).addClass('active'); 
    } 
});

Eso comprueba cada enlace si el atributo href coincide con la URL actual de los documentos y si agrega clases 'activas' a las clases CSS de elementos.

Una pequeña advertencia: esto solo funcionará si la URL absoluta mencionada en el menú y utilizada en el documento real coincide exactamente. Digamos que la URL actual es http://example.org/dir/, luego <a href="index.html"> no se resaltará, ya que se resuelve en http://example.org/dir/index.html. <a href="/dir/"> coincidirá.
(Asegurarse de que se utiliza la misma URL para cada página en todo el sitio es una buena práctica de todos modos, p.para la optimización de motores de búsqueda y almacenamiento en caché de proxy)

Las diferentes partes utilizadas son:

$("A") selecciona todos los elementos A (anclajes). Probablemente quiera hacerlo un poco más específico seleccionando todos los elementos A dentro de su menú, p. $("#menu A"). [jQuery]
.each(func) ejecuta la función especificada en cada uno de los elementos seleccionados. Dentro de esa función this se referirá al elemento seleccionado. [jQuery]
this.href devuelve el absolute URI of the linked resource, no como es de esperar, la posible ubicación relativa especificada en el HTML. [DOM estándar]
$(this).addClass(clzName) se usa para agregar una clase CSS al elemento especificado. [JQuery]

Para asegurarse $("A") encuentran todos los elementos, lo ejecuta después de que el documento se ha cargado completamente (en el $(document).ready() jQuery controlador de eventos, o mediante el atributo de la etiqueta onloadBODY).

Fuente

2011-09-27 17:43:54 beetstra

Esto es increíble y muy elegante. Aunque no puedo hacer que funcione, (http://i5.nyu.edu/~jpr226/)-- ¿Qué hace $ ("A") cada uno? ¿Requiere eso jQuery? – Jono

sí, requiere jQuery. Actualizaré mi respuesta para explicarlo un poco más. – beetstra

$ (this) .addClass ('active') no parece funcionar; Traté de ver qué (esto) contenía al agregar "alerta (esto)" debajo de esa línea, y recibí una alerta que dice la URL actual, lo que me lleva a pensar que de alguna manera no está haciendo un buen trabajo seleccionando el Elemento que debe clasificarse – Jono

Algo como esto

var url = $(location).attr('href'); 
    //get the url 

if(url.indexOf('home.html') != -1){ 
    //indeOf returns -1 if item not found in string 
    //so if it is not -1 (that is, found) 
    //then apply the styles 
    $('#nav').css('background','blue'); 
}

es probable que tenga una sentencia switch o el caso, sin embargo, para tratar con todas las URL/secciones.

Algo así como

var url = $(location).attr('href'); 
var fileName = url.slice(url.lastIndexOf('/') + 1); 

switch (fileName){ 
    case 'home.html': 
     $('#nav').css('background','blue'); 
     break; 
    case 'about.html': 
     $('#nav').css('background','red'); 
     break; 
}

Fuente

2011-09-27 16:53:02

Para leer la URL actual en javascript:

var url = window.location.href;

Para cambiar una propiedad css en un elemento dado:

$('some_selector').css({ backgroundColor, 'blue' });

Fuente

2011-09-27 16:53:28

var url_arr = document.URL.split('/'), 
    page = url_arr[url_arr.length - 1]; 

switch (page) { 
    case 'home.html': 
     $('your-element').addClass('your-class'); 
     break; 

    /* other cases here */ 

}

que debería hacer el tric k.

Fuente

2011-09-27 17:01:16

+1 para empleados :) –

Creo que una solución mucho mejor sería establecer una clase en la etiqueta html en lugar de cambiar un archivo css por página.

$("html").addClass(window.location.path.split(".")[0]);

y luego tiene ningún estilos CSS personalizados basados fuera de esa clase:

html.home > .nav { background-color: blue; } 
html.about > .nav { background-color: green; } 
html.contact > .nav { background-color: red; }

Esto sólo funcionaría si cada página tenía una extensión de dividir, que es

Desde estás usando PHP puedes hacer esto sin jQuery en absoluto:

<html class="<?php $_SERVER['PHP_SELF'] ?>">

o algo por el estilo, que saben muy poco acerca de PHP, pero estoy seguro de que sería algo similar o construidos fuera de este

Fuente

2011-09-27 17:04:51 hunter

¿Cómo puedo obtener jQuery o Javascript para cambiar css en función de la URL actual?

Respuesta

Cuestiones relacionadas