0

Buenas, lo que estoy intentando hacer no se si se podrá hacer sin AJAX. Tengo una plantilla en html en el cual tiene unos botones a la izquierda. Mi idea es que al pulsar un botón se agregue al div el contenido correspondiente. Había pensado hacerlo con include y el nombre del archivo que contiene el texto.

Os pongo la imagen de la plantilla: introducir la descripción de la imagen aquí

Código de la plantilla:

<html>
    <head>    
        <title>Plantilla</title>
        <meta charset="UTF-8"/>
        <style>
            #contenedor{border: 2px solid black; margin:0 auto;background-color:#A9F5BC; width:796px;overflow:hidden;}
            #cabecera{border-bottom: 2px solid black; width:796px; height:80px; font-size:30px; padding-top:10px; text-align:center;}
            #menu{float:left; border-top: 0px solid black; border-bottom: 0px solid black; width:198px; padding:1px;}
            button{margin:0 auto; display:block; margin-top:20px;}
            #contenido{float:left; width:580px; padding:8px; height:auto; background-color:#F3F781;text-align:center; min-height:400px;}            
        </style>
    </head>
    <body>
        <div id="contenedor">
            <div id="cabecera">
                EXAMEN PHP<br>
                Mario Guiberteau
            </div>    
            
            <div id="menu">
                <button name="ejercicio1">Ejercicio 1</button>
                <button>Ejercicio 2</button>
                <button>Ejercicio 3</button>
            </div>
                
            <div id="contenido">
                <?php
                    if(isset($_GET["ejercicio1"])){ include 'Ejercicio1.html';}
                ?>    
            </div>            
        </div>
    </body>
<html>    

El texto que contiene el archivo Ejercicio1.html es: Contenido del botón uno.

La cuestión es si es posible de que a la hora de pulsar un botón me pusiera el contenido del archivo en la zona amarilla.

Gracias de antemano

4
  • Creo que no hay manera de hacerlo sin ajax, ya que sin recargar el navegador no lo conseguirias
    – asantana o
    Commented el 28 oct. 2017 a las 12:02
  • ¿Te plantearías usar un iframe?
    – Alvaro Montoro
    Commented el 28 oct. 2017 a las 14:55
  • Funcionaria?? Como lo tendría que hacer?
    – DevMind
    Commented el 28 oct. 2017 a las 16:09
  • 1
    Lo podrías hacer con forms
    – Thakur
    Commented el 28 oct. 2017 a las 17:36

3 respuestas 3

2

Podrías usar iframe y no necesitarías nada de JavaScript, sólo tendrías que cambiar el target de los enlaces para que apunten al atributo name del iframe. Algo como esto:

#contenedor {
  border: 2px solid black;
  margin: 0 auto;
  background-color: #A9F5BC;
  width: 796px;
  overflow: hidden;
}

#cabecera {
  border-bottom: 2px solid black;
  width: 796px;
  height: 80px;
  font-size: 30px;
  padding-top: 10px;
  text-align: center;
}

#menu {
  float: left;
  border-top: 0px solid black;
  border-bottom: 0px solid black;
  width: 198px;
  padding: 1px;
}

button {
  margin: 0 auto;
  display: block;
  margin-top: 20px;
}

#contenido {
  float: left;
  width: 580px;
  padding: 8px;
  height: auto;
  background-color: #F3F781;
  text-align: center;
  min-height: 400px;
  position: relative;
}

/* el iframe debe ocupar todo el espacio de #contenido */
#contenido iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 0;
}

/* le damos estilos a los enlaces para que parezcan botones */
#menu a {
  display: inline-block;
  margin: 3px 10px;
  padding: 4px 10px;
  background: #eee;
  color: #333;
  text-decoration: none;
}
<div id="contenedor">
  <div id="cabecera">
    EXAMEN PHP<br> Mario Guiberteau
  </div>

  <div id="menu">
    <a target="miIframe" href="https://es.stackoverflow.com">Ejercicio 1</a>
    <a target="miIframe" href="https://www.google.com">Ejercicio 2</a>
    <a target="miIframe" href="https://www.facebook.com">Ejercicio 3</a>
  </div>

  <div id="contenido">
    <iframe name="miIframe"></iframe>
  </div>
</div>

1
        <html>
            <head>  
                <title>Plantilla</title>
                <meta charset="UTF-8"/>
                <style>
                    #contenedor{border: 2px solid black; margin:0 auto;background-color:#A9F5BC; width:796px;overflow:hidden;}
                    #cabecera{border-bottom: 2px solid black; width:796px; height:80px; font-size:30px; padding-top:10px; text-align:center;}
                    #menu{float:left; border-top: 0px solid black; border-bottom: 0px solid black; width:198px; padding:1px;}
                    button{margin:0 auto; display:block; margin-top:20px;}
                    #contenido{float:left; width:580px; padding:8px; height:auto; background-color:#F3F781;text-align:center; min-height:400px;}            
                </style>
            </head>
            <body>
                <div id="contenedor">
                    <div id="cabecera">
                        EXAMEN PHP<br>
                        Mario Guiberteau
                    </div>  

                    <form id="menu">
                        <button name="ejercicio" value="ejercicio1">Ejercicio 1</button>
                        <button name="ejercicio"  value="ejercicio2">Ejercicio 2</button>
                        <button name="ejercicio"  value="ejercicio3">Ejercicio 3</button>
                    </form>

                    <div id="contenido">
                        <?php
if(isset($_GET["ejercicio"])){



    include $_GET["ejercicio"].'.html';



}





?>  
                    </div>          
                </div>
            </body>
        <html> 
2
  • ¿Podrías explicar cómo funciona esta solución? (Edita la respuesta y añade la información directamente ahí en lugar de en los comentarios)
    – Alvaro Montoro
    Commented el 28 oct. 2017 a las 19:08
  • Al utilizar form, podemos enviar parámetros a PHP, entonces cada botón tiene el atributo value con el valor del archivo que quieres incluir. Al enivar el formulario se la información asociada al botón clicado. El php comprueba que hay el parámetro 'ejercicio', en caso de que haya se incluye el archivo.
    – Thakur
    Commented el 29 oct. 2017 a las 18:47
0

Así funciona perfecto, tan solo debes cambiar en el atributo data el nombre de tu archivo html a cargar <object type="text/html" data="ejercicio1.html" ></object>:

Código completo

<html>
    <head>
        <title>Plantilla</title>
        <meta charset="UTF-8"/>
        <style>
            #contenedor{border: 2px solid black; margin:0 auto;background-color:#A9F5BC; width:796px;overflow:hidden;}
            #cabecera{border-bottom: 2px solid black; width:796px; height:80px; font-size:30px; padding-top:10px; text-align:center;}
            #menu{float:left; border-top: 0px solid black; border-bottom: 0px solid black; width:198px; padding:1px;}
            button{margin:0 auto; display:block; margin-top:20px;}
            #contenido{float:left; width:580px; padding:8px; height:auto; background-color:#F3F781;text-align:center; min-height:400px;}
        </style>
    </head>
    <body>
        <div id="contenedor">
            <div id="cabecera">
                EXAMEN PHP<br>
                Mario Guiberteau
            </div>

            <div id="menu">
                <button type="button" id="ejercicio1">Ejercicio 1</button>
                <button type="button" id="ejercicio2">Ejercicio 2</button>
                <button type="button" id="ejercicio3">Ejercicio 3</button>
            </div>

            <div id="contenido"></div>
        </div>
        <script type="text/javascript">
            document.getElementById("ejercicio1").addEventListener('click', function() {
                document.querySelector("#contenido").innerHTML = '<object type="text/html" data="ejercicio1.html" ></object>';
            });
            document.getElementById("ejercicio2").addEventListener('click', function() {
                document.querySelector("#contenido").innerHTML = '<object type="text/html" data="ejercicio2.html" ></object>';
            });
            document.getElementById("ejercicio3").addEventListener('click', function() {
                document.querySelector("#contenido").innerHTML = '<object type="text/html" data="ejercicio3.html" ></object>';
            });
        </script>
    </body>
<html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.