Mostrar datos en un div, que cambie haciendo clic

[juanpi2013]

Buenas, quiero mostrar datos en un div en funcion a varios enlaces, por ejemplo tengo varias fotos y quiero que al hacer clic en la foto pequena me muestre su contenido en un div, y al hacer clic en otra foto cambie de igual manera el contenido.

Les dejo el link para que vea la interfaz.
http://www.greenteam.com.pe/nuestro-equipo.html

Por fa si alguien sabe como puedo hacerle que me de unas pautas o algun ejemplo.

Gracias!!!

[jobu]

Hace falta especificar mas el problema, porque pueden haber varias alternativas.

Por ejemplo, si lo que vas a cargar en el div es una pagina, entonces puedes usar la funcion load() de jquery:

Código Javascript:

$("#midiv").load("mipagina.html");
 

Si no es una pagina podrias cargar el contenido html con la funcion html() de juqery:

Código Javascript:

var contenido=""; //a esta variable se agrega el contenido html que se desea mostrar
$("#midiv").html(contenido);
 

Saludo

[juanpi2013]

quisiera algo mas optimizado, tengo 5 enlaces cada una tiene que mostrar contenido diferente en un div, me doy la idea de mostrar un div y despues ocultarlo.

[jobu]

Es un poco complicado ayudar sin ver algo de código, pero se me ocurre algo asi, capturando el evento clic sobre en enlace y mostrando el div que quieres así:

Código Javascript:

$("#enlace").click(function(){ //se captura el evento clic sobre el enlace
$("#midiv").show(); // se muestra el div
});
 

[juanpi2013]

Hise esto me funciona bien en firefox pero en chrome no:

<script type="text/javascript">
$(document).ready(function(){
$("#enlace1").click(function(event){
$("#mostrar-contenido").load("datos-mapas.html #lima");
});

$("#enlace2").click(function(event){
$("#mostrar-contenido").load("datos-mapas.html #arequipa");
});

$("#enlace3").click(function(event){
$("#mostrar-contenido").load("datos-mapas.html #cusco");
});
});
</script>


en chrome me sale estos errores, cual puede ser el problema, gracias!!!


event.returnValue is deprecated. Please use the standard event.preventDefault() instead.


OPTIONS file:///C:/wamp/www/green-team/es/datos-mapas.html No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.


XMLHttpRequest cannot load file:///C:/wamp/www/green-team/es/datos-mapas.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

[PHPeros]

El primer error es un bug que se soluciona actualizando el navegador o utilizando una versión más reciente de jQuery.

[andresbetancourt]

hay unas funciones en jquery que permiten limpiar y poner contenido en los divs

[jobu]

Si es esa la ruta exacta del archivo "datos-mapas.html" ?

[juanpi2013]

tengo esta version:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

pero igual sigue, sin funcionar.

[jobu]

No se si el parametro event que estas pasando funcione, yo haria la prueba quitando ese "event".