Tengo un problema.
Quiero agregar la clase "activa" en el menú de elementos cuando la página relativa está activada.
el menú es muy sencillo:
<div class="menu"> <ul> <li><a href="~/link1/">LINK 1</a> <li><a href="~/link2/">LINK 2</a> <li><a href="~/link3/">LINK 3</a> </ul> </div>En jQuery necesito verificar si la url es www.xyz.com/other/link1/
si es este, me gustaría agregar una clase, el elemento 'a' de link1.
Estoy probando muchas soluciones pero nada funciona.
Haga clic aquí para una solución en jsFiddle
Lo que necesita es obtener window.location.pathname como se mencionó y luego crear expresiones regulares a partir de él y probarlo con hrefs de navegación.
$(function(){ var url = window.location.pathname, urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there // now grab every link from the navigation $('.menu a').each(function(){ // and test its normalized href against the url pathname regexp if(urlRegExp.test(this.href.replace(/\/$/,''))){ $(this).addClass('active'); } }); });Una forma más fácil para mí fue:
var activeurl = window.location; $('a[href="'+activeurl+'"]').parent('li').addClass('active');porque mis enlaces van a una URL absoluta, pero si sus enlaces son relativos, puede usar:
window.location**.pathname**Ningún otro método "addClass" funcionó para mí al agregar una clase a un elemento 'a' en el menú, excepto este:
$(function () { var url = window.location.pathname, urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); $('a').each(function () { if (urlRegExp.test(this.href.replace(/\/$/, ''))) { $(this).addClass('active'); } }); });Me llevó cuatro horas encontrarlo.