efecto javascrip no funciona en un enlace dinámico

[cristian_cena]

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

[cristian_cena]

Para que se comprenda mejor les paso el codigo del index.php y del menu.php

Código PHP:

  <?php 
    include("includes/top_page.php"); 
?>
<div id="contenedor">
    <div id="contacto"><?php include("includes/contacto.php"); ?></div>     
    <div id="cabecera">       
        <?php include("includes/cabecera.php"); ?>  
        <?php include("includes/menu.php"); ?>   
    </div>                
    <div id="cuerpo">
        <?php include("includes/pages.php"); ?>        
    </div>
</div>
<?php include("includes/bottom_page.php"); ?>   

el archivo menu.php contiene el siguiente codigo

Código:

<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>

Pareceria que se recarga el menu cada vez que clickeo en uno de sus enlaces cuando solo lo que debería recargarse es el cuerpo del index.php
O si esto no ocurre no se que es lo que se me esta pasando con el codigo javascript.

Bueno, muchas gracias de antemano.