Foros del Web - Ver Mensaje Individual - Insertar una ventana de navegacion dentro de la misma

Landa11 · #8 (**permalink**) 26/03/2015, 16:24

Cita:

Iniciado por NueveReinas

Entonces haz una función donde declares que al hacer click en el ID, por ejemplo, "tienda 1", se cree un iframe con esa URL dentro del mismo.

¿Me explico?

Amigo. siguiendo tu consejo pude encontrar un ejemplo y lo ando adaptando y hace lo que necesito.

Agregué un div para poder llamar los enlaces y con JS puse la sentencia para que me muestre la página que necesito.

Dejo el código muestra por si alguien en el futuro pueda necesitarlo. Y gracias de nuevo por tu gran ayuda, igual los ejemplos que agregaste me ayudaron a comprender el asunto.

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<style>
    .menu {
        width: 20%;
        height: 25px;
        float: left;
        padding: 10px;  
        text-align: center;
        background: #fff;
        color: #000;
    }
    .menu:hover {
        background: #000;
        color: #fff;    
    }
    #content {
        clear: both;
        background: #e5e5e5;
        padding: 0;
        overflow-y: scroll;
        width: 100%;
        height: 600px;
        border: 0;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function(e) {
        $('#menu1').on('click', function(){
            
            $('#content').attr('src', 'page1.html');
        });
        $('#menu2').on('click', function(){
            $('#content').attr('src', 'page2.html');
            
        });
        $('#menu3').on('click', function(){     
            $('#content').attr('src', 'http://bing.com');
            
        });
        
        
    });
</script>
</head>
<body>
<div id="main">
    <div id="nav">
        <div id="menu1" class="menu">Page 1</div>
        <div id="menu2" class="menu">Page 2</div>
        <div id="menu3" class="menu">Google</div>       
    </div>
    <iframe id="content" src="http://google.com" allowtransparency="1" scrolling="auto"> No Soporta iFrames</iframe>
</div>
</body>
</html>

Lo que necesitaba era que al dar click en el div de Google, me abriera ahí mismo en la página, y así es, ya lo ando implementando en mi menú y funciona de maravilla.