El tema es que tengo un menú:
Código HTML:
CODIGO HTML <ul id="menuNav"> <li class="itemNav" id="itemNav1"><a href="index.php">Bienvenidos</a></li> <li class="itemNav" id="itemNav2"><a href="index.php?page=serviciosMedicos">Servicios Médicos</a></li> <li class="itemNav" id="itemNav3"><a href="index.php?page=tratamientos">Tratamientos</a></li> </ul>
Código HTML:
CODIGO CSS .itemNav { display:inline; float:left; line-height:60px; } .itemNavActivo{ display:inline; float:left; line-height:60px; background-image:url('../img/trianguloNav.png'); background-position:bottom; background-repeat:no-repeat; }
Código:
Esto funciona perfecto en un sitio digamos "común" pero resulta que monte mi sitio de forma modular con php y aqui el problerma:CODIGO JAVASCRIPT (CON JQUERY) $(document).ready(function(){ $("#itemNav1 a").click( function() { $("#itemNav1").fadeIn( 100, function() { $(this).addClass("itemNavActivo"); $("#itemNav2 a").removeClass("itemNavActivo"); $("#itemNav3 a").removeClass("itemNavActivo"); }); }); $("#itemNav2 a").click( function() { $("#itemNav2").fadeIn( 100, function() { $(this).addClass("itemNavActivo"); $("#itemNav1 a").removeClass("itemNavActivo"); $("#itemNav3 a").removeClass("itemNavActivo"); }); }); $("#itemNav3 a").click( function() { $("#itemNav3").fadeIn( 100, function() { $(this).addClass("itemNavActivo"); $("#itemNav1").removeClass("itemNavActivo"); $("#itemNav2").removeClass("itemNavActivo"); }); });
La imagen de fondo que debería quedar visible luego del click en el item de menu aparece y desaparece en vez de solo aparecer.
Pasa que antes (cuando el efecto funcionaba y mi pagina era .html) tenia el enlace del item de menu de este modo <a href="#"> y luego al hacer la web modular me quedó de este otro href="index.php?page=serviciosMedicos"
¿que estara pasando?
Desde ya muchas gracias. Tengo el sitio en local todavia, pero si necesitan ver mas en detalle el funcionamiento lo subo a un servidor.
Saludos