Foros del Web » Creando para Internet » Diseño web »

efecto javascrip no funciona en un enlace dinámico

Estas en el tema de efecto javascrip no funciona en un enlace dinámico en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/04/2010, 10:30
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
efecto javascrip no funciona en un enlace dinámico

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
  #2 (permalink)  
Antiguo 29/04/2010, 10:32
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: efecto javascrip no funciona en un enlace dinámico

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.

Última edición por cristian_cena; 29/04/2010 a las 10:37

Etiquetas: efecto, enlace, javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:40.