jQuery agregar clase basada en la URL de la página

Tengo lo que creo es una pregunta simple pero no puedo hacer que funcione por mi vida.jQuery agregar clase basada en la URL de la página

Todo lo que quiero hacer es agregar un javascript a la página que agrega una clase al contenedor de la página principal en función de la URL.

Digamos que tengo un sitio en root.com y la siguiente estructura html (hablando en términos generales):

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    </head> 
    <body> 
    <div id="main" class="wrapper"> 
     Blah, blah, blah 
    </body> 
</html>

Lo que quiero hacer es un script que, si la página = raíz (por ejemplo) .com/technology, agrega una clase al div principal. Por lo que el div podría tener el siguiente aspecto:

 <div id="main" class="wrapper tech">

He cargado jQuery, por lo que me gustaría hacerlo de esa manera.

Fuente

2012-04-02 Matt Martin

Se puede utilizar window.location Obtenga la dirección actual, y luego cambiar sobre la base de que:

$(function() { 
    var loc = window.location.href; // returns the full URL 
    if(/technology/.test(loc)) { 
    $('#main').addClass('tech'); 
    } 
});

Esto usa una expresión regular para ver si la URL contiene una frase particular (notablemente: technology), y si es así, agrega una clase al elemento #main.

Fuente

2012-04-02 20:13:46

Esto funciona. Gracias. –

Excelente funciona muy bien gracias. – 422

@alex vidal Funciona bien para mí, pero se carga un poco más tarde de lo normal. Estoy usando esta acción para mantener abierto un submenú una vez que el usuario está determinado. Por lo tanto, el usuario puede ver después de 1 o 2 segundos cómo se abre el menú de la categoría secundaria. Me gustaría que haga esto al instante, ¿cómo puedo evitar esto? –

Utilice location objeto incorporado para determinar la URL completa o algunas partes de ella.

Fuente

2012-04-02 20:09:35 kirilloid

Claramente esto es correcto, pero no responde completamente mi pregunta de * cómo * hacerlo. –

algo como below ayuda? basado en otra respuesta, sólo por hacer

console.log (window.location)

, puede riquezas gran cantidad de información relacionada con su ubicación objeto

 if(window.location.href=== "root.com/technology") { 
     $("#main").addClass("tech"); 
    }

Fuente

2012-04-02 20:11:58 DG3

Bueno, aquí es cómo lo haría:

switch (window.location.pathname) { 
    case '/technology': 
     $('#main').addClass('tech') 
    case '/something': 
    case '/somestuff': 
     $('#main').addClass('some') 
}

De esta forma, mantener su código limpio y se puede agregar fácilmente otro caso.

Ver here lo que significa window.location.pathname.

Fuente

2012-04-02 21:05:54

Me gusta esto porque, como dices, puedes agregar fácilmente otro caso sin arruinar las cosas. Pero no puedo hacer que funcione ... –

Me gusta esta respuesta mejor que la 'mejor' respuesta seleccionada. Los enunciados de cambio son mucho más limpios que los condicionales. – IE5Master

jQuery agregar clase basada en la URL de la página

Respuesta

Cuestiones relacionadas