Comunidad de diseño web y desarrollo en internet online

onclick cargar contenido en un div

Citar            
MensajeEscrito el 17 Ago 2011 01:29 am
Hola,
¿como hacer para insertar el contenido definiendo un div con Onclick?

tengo este ejemplo que me paso un amigo, pero trabaja con ajax y archivos externos, quisiera que funcione directamente, es decir, todo en esta linea de codigo:

<input type="button" value="Quini 6" onClick="verPagina1();" >

por ej: <input type="button" value="Quini 6" onClick="cargarmipagina.html" target="midiv" >

Gracias

Por mbascolo

48 de clabLevel



Genero:Masculino  

Programación Sitios Web

chrome
Citar            
MensajeEscrito el 17 Ago 2011 07:14 am
No entiendo en absoluto que necesita... quiere que este en la pagina actual oculto en vez de usar Ajax?

Por ViejoIvan

7 de clabLevel



 

chrome
Citar            
MensajeEscrito el 17 Ago 2011 07:36 am
Es simple, quiero cargar el contenido de un html en un div de la página principal, teniendo 2 o 3 enlaces, con contenidos diferentes.
¿se entiende mejor?

Por mbascolo

48 de clabLevel



Genero:Masculino  

Programación Sitios Web

chrome
Citar            
MensajeEscrito el 17 Ago 2011 12:09 pm
AJAX hace exactamente eso, amigo mbascolo. Pero no hay una forma simple que se pueda resolver en una sola línea de código como lo quieres tú a juzgar por el ejemplo que has puesto (al menos por ahora, quizá en el futuro, cuando el estandar evolucione sí se pueda).

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 17 Ago 2011 06:26 pm
No sé si te he entendido bien pero prueba esto:

Guarda los contenidos que quieres mostrar en div´s aparte, ejemplo:

<div id="contenido1" style="display:none">Contenido de primera parte</div>
<div id="contenido2" style="display:none">Contenido de la segunda parte</div>
<div id="contenido3" style="display:none">Contenido de la tercera parte</div>

Luego crea el botón:

<input type="button" value="cargar contenido 1" onclick="javascript:contenido('contenido1')" />
y la función javascript

<script type="text/javascript" language="javascript">
function contenido(id){
$("#" + id).css({"display": "block"});
}
</script>

Para eso debes tener importada la biblioteca de jQuery, de no ser así busca la manera de modificar pa propiedad css display con javascript puro, si se puede pero no recuerdo como xD

Espero y sea lo que necesitas, Saludos

Por Kompanhero

21 de clabLevel



Genero:Masculino  

Inocente hasta probar lo contrario.

chrome
Citar            
MensajeEscrito el 17 Ago 2011 07:36 pm

Kompanhero escribió:

Para eso debes tener importada la biblioteca de jQuery, de no ser así busca la manera de modificar pa propiedad css display con javascript puro, si se puede pero no recuerdo como xD

Pues es así:

Código Javascript :

function contenido(id) {
document.getElementById(id).style.display = "block";
}

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 17 Ago 2011 08:29 pm

DriverOP escribió:

Pues es así:

Código Javascript :

function contenido(id) { 
document.getElementById(id).style.display = "block"; 
}



Ándele, así mero. Es que hace un buen que solo utilizo jQuery y tengo problemas con mi memoria a largo plazo ^^

Otra cosa, en caso de que quieras estar alternando el contenido cargado debes agregar a la función que antes de que muestre el nuevo div oculte el anterior.

O puedes crear un cuarto div al que solo le estés pasando el contenido de los otros y te ahorras el paso de estar verificando que no haya ya uno abierto.

Creo que es mediante la función innerhtml o algo así, ¿Es correcto DriverOP?

Por Kompanhero

21 de clabLevel



Genero:Masculino  

Inocente hasta probar lo contrario.

chrome
Citar            
MensajeEscrito el 17 Ago 2011 09:06 pm
Correcto. Pero no es una función sino una propiedad (para hablar con, valga la redundancia, propiedad ;))

Código Javascript :

document.getElementById(id).innerHTML = "<h1>Acá estoy</h1>";  


Las mayúsculas importan.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 17 Ago 2011 10:25 pm
Gracias chicos, está genial y muy sencillo. Voy a utilizarlo luego les cuento.

Saludos!

Por mbascolo

48 de clabLevel



Genero:Masculino  

Programación Sitios Web

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.