K jquery debo utilizar

[syslock64]

BUENAS, tratare de graficar en ASCII mi web xD para que entiendan su estructura:

//////////////////////////////////////////////////////////-(INDEX.PHP)//
// | PRINCIPAL | SERVICIOS | MAPSITE | ENLACES | ETC ///////////
//////////////////////////////////////////////////////////-(INDEX.PHP)//
// //
// ---------------------------------------------(DIV .CAMBIANTE) //
// | IMAGEN1\\\\\\\\\\\\\\\ | //
// | \\\\\\\\\\\\\\\\\\\\\\\\\ | //
// | \\\\\\\\\\\\\\\\\\\\\\\\\ | //
// | \\\\\\\\\\\\\\\\\\\\\\\\\ | //
// | \\\\\\\\\\\\\\\\\\\\\\\\\ | //
// | \\\\\\\\\\\\\\\\\\\\\\\\\ | //
// ---------------------------------------------(DIV .CAMBIANTE) //
// //
//////////////////////////////////////////////////////////-(INDEX.PHP)//
// copyright | web design | contactanos /////////////////////////
//////////////////////////////////////////////////////////-(INDEX.PHP)//

PASO A EXPLICAR:
este es mi arbol:
index.php
style.css
[/PHP] (aki van mis archivos php)
[/IMG] (aki van mis imagenes)

-------------------------------------------
Al cargar index.php tengo estos menus(PRINCIPAL | SERVICIOS | MAPSITE) y tbn esta el DIV CAMBIANTE en la parte central del INDEX.PHP.

En este DIV.CAMBIANTE pongo un INCLUDE("php/pagina1.php"); para k cargue la pagina. y muestre ese contenido al entrar al website.

Hasta ahi todo bien. Al cargar la web en el DIV.CAMBIANTE muestra el archivo incluido, pero dentro de este DIV.CAMBIANTE tengo un enlace k esta enlazado a IMAGEN1 <a href="php/pagina2.php >" y al darle click me abre en otra ventana... como debo hacer para k cargue dentro del div unicamente...

este es el enlace 3w + istcepea.edu.pe/neweb pueden entrar y cheken pliz...

[pulidomann]

@syslock64 hola... ya vi el sitio y algunas de las funciones que tienes en los links.

Lo que entiendo, es que quieres que cambie el contenido de los divs, en vez de cambiar completamente de página.

Para lograrlo adecuadamente te puedo recomendar lo siguiente.

1. Crea páginas estáticas (en html o php) para cada sección. Aunque no vayas a ir hacia ellas desde tu página principal, para los buscadores es importante que existan, y que la gente pueda accesar desde los mismos... en pocas palabras, que existan los URL.

2. En los menús, agrega los links verdaderos (no pongas el javascript adentro del "href"). Por ejemplo, lo que debes hacer es <a href="cocina-italiana">cocina italiana</a>

3. Vamos a darle comportamiento AJAX a los links. Para esto debemos de prevenir que al dar clic se cambie de página, y que en vez de eso, meta contenido en los divs. Esto es un tramo del html

Código:

<div id="menu">
  <a href="cocina">cocina</a>
  <a href="bebidas">bebidas</a>
  <a href="tabacos">tabacos</a>
  <a href="fiestas">fiestas</a>
</div>
<div id="cambiante"></div>
<!-- debes bajar el jquery desde jquery.com y agregarlo en tu html -->
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#menu > a:eq(0)").click(function(){
        $("#cambiante").load("ajax/cocina.html");
        return false;
    });
    $("#menu > a:eq(1)").click(function(){
        $("#cambiante").load("ajax/bebidas.html");
        return false;
    });
    /**
     * y asi le haces con cada link... es muy importante dejar el "return false"
     * para que el evento funcione correctamente.
    */
  });
</script>
</body>
</html>

Los archivos que puedes ver que están en la carpeta ajax deben contener SOLAMENTE la parte del html que quieres meter en ese DIV.

Los archivos estáticos a los que apunta cada link, esos sí deben estar completos.

No importa como los implementes (con php, html estático, etc...), la técnica que te muestro aquí, es para que en la página en la que lo implementas, cargue el contenido dentro del div que te especifico.

Espero te funcione.

Saludos!

[pulidomann]

... corrijo.. ahí no se porqué demonios puse la versión jquery 1.2.6 ... debe ser la más actual 1.3.2 (que está disponible en jquery.com o code.google.com/p/jqueryjs