menu activo con javascript

[charlyta]

Hola. Suelo utilizar una función muy sencilla para detectar la página actual y así empujar una clase css. El tema es que he cambiado de css y en lugar de li/ul trabajo con este html actual y mi función no reconoce la selección..upff pongo el ejemplo y a ver si queda más claro. gracias.

mi javascript

Código Javascript:

function setActive() {
  aObj = document.getElementById('menu').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}
window.onload = setActive;
 

mi html

Código HTML:

<div id="menu">
    <NAV>
<A 
id=nav_home href="inicio.htm"><SPAN>Inicio</SPAN></A>
 
<A id=nav_barra><SPAN></SPAN></A>
<A 
id=nav_trabajos href="trabajos.htm"><SPAN>trabajos</SPAN></A>
<A id=nav_barra><SPAN></SPAN></A>
 
</div>
 

mi css

Código CSS:

#nav_inicio .active a { background: url(nav.png) -8px 0; } 
#nav_trabajos .active a { background: url(nav.png) -8px 0; }
 

[zerokilled]

buenas,
el problema es que el CSS esta mal. fijate lo que dicen los selectores. "aplicar propiedades a elemento <a> que estan dentro de un elemento con clase .active y a su vez dentro de un elemento con id #nav_trabajos". es decir, las propiedades serian aplicada a un elemento <a> como en el ejemplo que sigue. notese el texto marcado en color rojo son donde los selectores coinciden.

Código:

<ul id="nav_trabajos">
<li class="active"><a href='...'>enlace</a></li>
<li><a href='...'>enlace</a></li>
</ul>

tu estructura html es distinta y por eso no se aplica las propiedades css. si vas a usar esa estructura, debes reescribir los selectores acorde a dicha estructura. por ejemplo, los enlaces ya tienen un id, puedes partir desde ahi.

Código:

/* notese que no hay espacio entre el id y la clase */
#nav_trabajos.active, #nav_inicio.active{
/* propiedades css */
}

[charlyta]

Correctísimo Killer! gracias

[charlyta]

Correctísimo zerokilled! gracias