es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Navegando entre

29 Jul, 2023 Programación

Soy capaz de dividir toda la página en 4 regiones y son las siguientes:

  • [header] (en la parte superior),
  • [nav] (justo debajo del encabezado),
  • [section] (en la parte inferior izquierda) y
  • [main] (en la parte inferior derecha).

En la parte [nav], tengo una lista de elementos con hipervínculos (como “item-A”, “item-B”, etc).

La tarea consiste en:
– Cuando se selecciona “item-A”, se debe mostrar en la parte [section] la sublista correspondiente que contiene “A1”, “A2”, “A3”, etc.
– Igualmente, si se selecciona “item-B”, se debe mostrar en la parte [section] la sublista “B1”, “B2” (sobrescribiendo el contenido anterior, por supuesto).
– “B2” está nuevamente vinculado al archivo “B.html”, el cual, al ser llamado, debe ejecutarse en la parte [main].

¿Cómo puedo hacer todo lo anterior?

P.D. Puedo finalizar lo anterior si uso [frame] y [frameset]. Desafortunadamente, estos quedan obsoletos en HTML5.

Las anchuras y alturas de cada región pueden definirse dentro de la configuración CSS.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr la tarea requerida sin utilizar marcos y conjuntos de marcos, podemos utilizar CSS y Javascript.

    1. Configuración de HTML:

    Primero, podemos definir la estructura HTML con cuatro regiones principales:

    • <header> para la sección superior del encabezado.
    • <nav> para la sección del menú de navegación.
    • <section> para mostrar los elementos del submenú.
    • <main> para mostrar el contenido del submenú seleccionado.

    Podemos agregar los hipervínculos para cada elemento del menú principal en la sección de navegación para activar la visualización de los elementos del submenú correspondientes en la región de la sección.

    <!DOCTYPE html>
<html>
    <head>
        <title>HTML5 Página de Diseño</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <header>
            <!-- Contenido del Encabezado -->
        </header>
        <nav>
            <ul>
                <li><a href="#" onclick="displaySubMenu('A')">item-A</a></li>
                <li><a href="#" onclick="displaySubMenu('B')">item-B</a></li>
                <!-- Más Elementos de Menú Principal -->
            </ul>
        </nav>
        <section id="subMenuSection">
            <!-- Mostrar Elementos del Submenú Aquí -->
        </section> 
        <main id="mainContent">
            <!-- Mostrar Contenido del Submenú Seleccionado Aquí -->
        </main>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>
    1. Configuración de CSS:

    A continuación, podemos utilizar CSS para definir las dimensiones y el diseño de cada región según sea necesario.

    header {
    height: 100px;
    background-color: #333;
    color: #fff;
}

nav {
    float: left;
    width: 200px;
    height: 500px;
    background-color: #ccc;
}

section {
    float: left;
    width: 300px;
    height: 500px;
    background-color: #eee;
}

main {
    float: left;
    width: 500px;
    height: 500px;
    background-color: #fff;
}
    1. Función de Javascript:

    Finalmente, podemos utilizar Javascript para implementar la función que muestra los elementos del submenú correspondientes cuando se hace clic en un elemento del menú principal.

    function displaySubMenu(menuItem) {
    // Obtener los elementos del submenú según el elemento del menú principal al que se hizo clic
    var subMenu = getSubMenu(menuItem);

    // Mostrar los elementos del submenú en la región de la sección
    var section = document.getElementById("subMenuSection");
    section.innerHTML = subMenu;
}

function getSubMenu(menuItem) {
    // Definir los elementos del submenú según el elemento del menú principal al que se hizo clic
    switch(menuItem) {
        case "A":
            return "<ul><li>A1</li><li>A2</li><li>A3</li></ul>";
        case "B":
            return "<ul><li><a href='B.html' target='main'>B1</a></li><li>B2</li></ul>";
        // Definir Más Elementos del Submenú
    }
}

    En esta función, podemos utilizar una declaración switch para definir los elementos específicos del submenú para cada elemento del menú principal. Una vez que tenemos los elementos del submenú, podemos actualizar el contenido de la región de la sección utilizando innerHTML. Si el elemento del submenú está vinculado a otra página, establecemos el destino del enlace en la región principal para mostrar el contenido allí.

    En general, este enfoque nos permite lograr el mismo diseño y comportamiento que el uso de marcos sin depender de HTML desactualizado.

Comments are closed.