Hola foreros, bien, no sabía donde ubicar este tema, pero supongo que viene bien aquí.
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:
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");
});
});
Esto funciona perfecto en un sitio digamos "común" pero resulta que monte mi sitio de forma modular con php y aqui el problerma:
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
