Links and Divs in html

Question

Links and Divs in html

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I'm making a page in html, and I'm trying to make a div index, click on a link, change the content of another div in which by default is a page with a title.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
<title>
Libro Fantas&iacute;a
</title>
</head>

<body>

<div id="indice">
    <h2>
    &Iacute;ndice
    </h2>
<hr>
<ol type="1" id="ol1">
    <li>
    Presentaci&oacute;n
    </li>
    <li>
    Razas
        <ul id="ul1">
            <li>
            <a href="Razas/Humanos.html">Humanos</a> 
            </li>
            <li>
            <a href="Razas/Elfos.html">Elfos</a>
            </li>
            <li>
            <a href="Razas/Ogros.html">Ogros</a>
            </li>
            <li>
            <a href="Razas/Enanos.html">Enanos</a>
            </li>
        </ul>
    </li>
    <li>
    Zonas
        <ul id="ul2">
            <li>
            <a href="Zonas/Rios.html">R&iacute;os</a>
            </li>
            <li>
            <a href="Zonas/Bosques.html">Bosques</a>
            </li>
            <li>
            <a href="Zonas/Ciudades.html">Ciudades</a>
            </li>
            <li>
            <a href="Zonas/Monta%C3%B1as.html">Montañas</a>
            </li>
            <li>
            <a href="Zonas/Sub.html">Reino Submarino</a>
            </li>
            <li>
            <a href="Zonas/Cielo.html">Reino del Cielo</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="Tablas.html">Estad&iacute;sticas y Tablas</a>
    </li>
</ol>
</div>
<div id="contenido">
    <iframe width="100%" height="100%" src="Pagina%20titulo.html"></iframe>
</div>

</body>
</html>

html5 div

asked by Alumno 05.12.2016 в 11:29

source

2 answers

Comments on android clearing Lightbox with Foundation 6

score 2 · Answer 1

If what you want to do is that the links open in iframe , what you have to do is simple:

Put an attribute name to iframe

Put an attribute target to the links, whose content will be name of iframe

If the links have a target name in the iframe attribute, then they will open in that particular iframe instead of in the parent window.

In your particular case it would look like this:

<div id="indice">
  <h2>
    &Iacute;ndice
  </h2>
  <hr>
  <ol type="1" id="ol1">
    <li>
      Presentaci&oacute;n
    </li>
    <li>
      Razas
      <ul id="ul1">
        <li>
          <a href="Razas/Humanos.html" target="miIframe">Humanos</a> 
        </li>
        <li>
          <a href="Razas/Elfos.html" target="miIframe">Elfos</a>
        </li>
        <li>
          <a href="Razas/Ogros.html" target="miIframe">Ogros</a>
        </li>
        <li>
          <a href="Razas/Enanos.html" target="miIframe">Enanos</a>
        </li>
      </ul>
    </li>
    <li>
      Zonas
      <ul id="ul2">
        <li>
          <a href="Zonas/Rios.html" target="miIframe">R&iacute;os</a>
        </li>
        <li>
          <a href="Zonas/Bosques.html" target="miIframe">Bosques</a>
        </li>
        <li>
          <a href="Zonas/Ciudades.html" target="miIframe">Ciudades</a>
        </li>
        <li>
          <a href="Zonas/Monta%C3%B1as.html" target="miIframe">Montañas</a>
        </li>
        <li>
          <a href="Zonas/Sub.html" target="miIframe">Reino Submarino</a>
        </li>
        <li>
          <a href="Zonas/Cielo.html" target="miIframe">Reino del Cielo</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="Tablas.html" target="miIframe">Estad&iacute;sticas y Tablas</a>
    </li>
  </ol>
</div>
<div id="contenido">
  <iframe name="miIframe" width="100%" height="100%" src="Pagina%20titulo.html"></iframe>
</div>

score 0 · Answer 2

Because you do not try with jQuery, there is a function called .load (), which has the following syntax:

.load (url [ data] [ callback (responseText, textStatus, XMLHttpRequest)])

url : is the string that contains the url to load. (mandatory).

data : parameters that we can pass to be treated by the destination of the url. (optional).

callback : function invoked after processing the url. (optional).

This is an example of use:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script>

            $( document ).ready(function() {
                //Se abre por default una página en el div content
                $("#content").load('principal.html', function(responseTxt, statusTxt, xhr){
                    //En caso de que se haya cargado correctamente se manda un mensaje al log
                    if(statusTxt == "success")
                            console.log("Contenido abierto exitosamente");
                    //En caso de que se haya un error se manda el estatus y la descripción de este
                    if(statusTxt == "error")
                            console.log("Ocurrió un error: " + xhr.status + ": " + xhr.statusText);
                });
                //función que se manda llamar cada vez que se da click en cada liga de div menu     
                $('#menu a').click(function(evt) {
                    //Evita que la página se redireccione a la página que se encuentra en el atributo href.
                    evt.preventDefault();
                    //se obtiene el atributo href
                    var pagina = $(this).attr('href');
                    //se manda llamar la función load para el div content
                    $("#content").load(pagina, function(responseTxt, statusTxt, xhr){
                        //En caso de que se haya cargado correctamente se manda un mensaje al log
                        if(statusTxt == "success")
                            console.log("Contenido abierto exitosamente");
                        //En caso de que se haya un error se manda el estatus y la descripción de este
                        if(statusTxt == "error")
                            console.log("Ocurrió un error: " + xhr.status + ": " + xhr.statusText);
                    });

                });
            });

        </script>
    </head>
    <body>
        <div id = "menu"> 
            <li>    
                <a href="humanos.html">Humanos</a> 
            </li>
            <li>    
                <a href="elfos.html">Elfos</a>
            </li>
            <li>
                <a href="ogros.html">Ogros</a>
            </li>
            <li>
                <a href="enanos.html">Enanos</a>
            </li>
        </div>  
        <div id="content"></div>    
    </body>
</html>