Como Mostrar contenido de un Menu en un div

jromeroak · #1 (**permalink**) 01/07/2014, 10:57

Buen día, quisiera saber como hacer lo siguiente:

tengo un menu (inicio, aplicaciones, tutoriales) quiero que al darle click en uno de ellos me llame a un html y se muestre en un div (llamado id="apContenido")

*con iframe funciona bien (pero he notado que al hacerle click la url no cambia, es decir, sigue siendo index.html en ves de aplicaciones.html ¡OJALA ME ENTIENDAN!)

*Con jQuery no logro ver el html en mi div="apContenido" y vaya que intentado de todo:

aca el codigo html:

Código HTML:

Ver original<!DOCTYPE HTML>
<html lang="es">
<head>
 
<meta charset="UTF-8" name="viewport" content="width=device-width; initial-scale=1.0">
<title>mi pagina</title>
 
<script src="jquery-1.6.1.min.js"></script>
 
<script type="text/javascript"> 
        $(document).ready(function() { 
        $("#inicio").click(function(event) { 
        $("#apContenido").load('aplicaciones.html');
 }); 
 }); 
 </script>
 
<body>
 
<header>
 
<div class="bottom" id="inicio">
        
    <a href="#"><img class="icon" src="imagenes/inicio3.png" width=109></a </div>
    
<div class="bottom" id="aplicaciones">
        
    <a href="#"><img class="icon" src="imagenes/aplicaciones.png" width=109></a></div>
    
</header>
 
    
    <div name="apContenido" id="apContenido">   
    
 
    </div>
 
</body>
</html>

moscrates · #2 (**permalink**) 01/07/2014, 13:03

Hola colega a simple vista puedo ver que tienes muchos errores en tu html, como por ejemplo tu etiqueta head nunca la cierras y luego veo una etiqueta <a> que no esta cerrada o le falta un símbolo corrige tu código html y vuelve a probar

jromeroak · #3 (**permalink**) 01/07/2014, 13:10

Cita:

Iniciado por moscrates

Hola colega a simple vista puedo ver que tienes muchos errores en tu html, como por ejemplo tu etiqueta head nunca la cierras y luego veo una etiqueta <a> que no esta cerrada o le falta un símbolo corrige tu código html y vuelve a probar

Gracias por responder... no me fije, el codigo trate de ajustarlo a lo que quiero hacer, es mucho mas extenso, en el original si cierro la etiqueta head y la "a" igual..

aca esta:

<!DOCTYPE HTML>
<html lang="es">
<head>

<meta charset="UTF-8" name="viewport" content="width=device-width; initial-scale=1.0">
<title>Apk Gratis para Android</title>

<link href="header.css" rel="stylesheet" type="text/css"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link href="great2.css" rel="stylesheet" type="text/css" media="screen and (min-width: 981px)"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#inicio").click(function(event) {
$("#apContenido").load('pagina1.html');
});
});
</script>
</head>

<body id=wrapper>



<div id="apArriba"></div>
<div id="apAbajo"></div>
<div id="apBuscador">
<center>
<label for="search"></label>
<input type="search" name="search" id="search" placeholder="buscar apk...">
</center>

</div>
<div id="apLogo">
<a href="estafunciona.html"><img src="imagenes/apk1.png" Width=250 Height=50 id="logoPrincipal"/></a>
</div>



<header>
<div class="bottom" id="inicio">

<a href="#"><img class="icon" src="imagenes/inicio3.png" width=109></a></div>

<div class="bottom" id="aplicaciones">

<a href="#"><img class="icon" src="imagenes/aplicaciones.png" width=109></a></div>

<div class="bottom" id="juegos">

<a href="#"><img class="icon" src="imagenes/juegos3.png" width=109></a></div>

<div class="bottom" id="rom">

<a href="#"><img class="icon" src="imagenes/rom.png" width=109></a></div>

<div class="bottom" id="tutoriales">

<a href="#"><img class="icon" src="imagenes/tutoriales.png" width=109></a></div>

<div class="bottom" id="noticias">

<a href="#"><img class="icon" src="imagenes/novedades.png" width=109></a></div>

<div class="bottom" id="contacto">

<a href="#"><img class="icon" src="imagenes/contacto.png" width=109></a></div>
</header>


<div name="apContenido" id="apContenido">

</div>

<footer>

<div id="pie">

</div>

</footer>
</body>
</html>

moscrates · #4 (**permalink**) 02/07/2014, 08:37

Código HTML:

Ver original<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width; initial-scale=1.0">
<title>Apk Gratis para Android</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#inicio").click(function(event) { 
        $("#apContenido").load('yo.html', function(){
            alert("Cargado");
            });
    }); 
}); 
</script>
</head>
 
<body id=wrapper>
 
<header>
    <div class="bottom" id="inicio" style="background-color:#F00; width:800px; height:300px">
        
    </div>
</header>
 
<div name="apContenido" id="apContenido"></div>
</body>
</html>

Recuerda que load carga paginas que estén en tu dominio, saludos