Cargar htm el div
3 seguidores
Hola a todos.
Estoy haciendo un manual de uso y queremos hacerlo en html. La idea es que tenga un menú en el lateral y que al pinchar en los botones se cargue un html externo en un contenedor.
¿Sabríais decirme como hacerlo?
Un saludo
Diego Lorenzo
Hay varias formas de hacerlo:
- Frames HTML: http://www.w3schools.com/html/html_iframe.asp , http://www.w3.org/TR/html4/present/frames.html
- Iframes HTML5: http://www.w3schools.com/html5/tag_iframe.asp
- Ajax: http://api.jquery.com/load/
Saludos
hector_ber
He encontrado una fórmula que me ha funcionado en http://www.cristalab.com/tutoriales/cargar-html-externo-con-jquery-c42442l/ Pero tengo un problemilla, no quiero utilizar su menú, quiero utilizar uno que yo ya tengo hecho y no se como hacer para que los links se carguen en el div. Pego el código para ver si me podéis ayudar. Mil gracias
<div id="menu">
<ul>
<li class="nivel1 primera" tabindex="1"><span class="nivel1">XXXXX</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="">sub menu</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
phpninja
Con jQuery puedes hacer:
$('id div contenedor').load("contenido.html");
y se cargar el contenido del archivo contenido.html en el div id div contenedor.
Busca en google jquery load.
hector_ber
Que se cargue ya lo he conseguido, lo que intento ahora es que funcione con un menú que he hecho yo, no tener que utilizar el que viene hecho en el tutorial que he colgado.
El script que he encontrado es JQuery
<script type="text/javascript">
$(document).ready(function(){
$("#nav a").each(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$(this).click(function(){
$("#show").load(href);
});
});
});
</script>
Donde "nav" el la id del menu que viene por defecto
<ul id="nav">
<li><a href="uno.htm">Enlace Uno</a></li>
<li><a href="dos.htm">Enlace Dos</a></li>
<li><a href="link.htm">Otro link</a></li>
<li><a href="1337.htm">1337</a></li>
<li><a href="creacionismo.htm">iDIotas</a></li>
</ul>
Yo he creado un menú con este código
<div id="menu">
<ul>
<li class="nivel1 primera" tabindex="1"><span class="nivel1">XXXXX</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="">sub menu</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
Y lo que necesito es que los submenús sean lo que tienen el link para cargar el HTML externo
Muchas gracias