1

Estoy tratando de hacer un ejemplo front-end con una barra de navegación y una serie de artículos que se mostrarán según la opción del menú seleccionada. Mi problema los artículos sólo se visualizan por un instante de tiempo muy breve que es cuando se pulsa con el botón sobre alguna de las opciones del menú, pero no persiste en el tiempo:

<style>     
    nav
    {
        width: 12%;
        float: left;
    }
            
    li a
    {
        display: block;
    }
        
    section
    {
        width: 85%;
        float: left;
    }
    
    article
    {
        display: none;
    }
</style>

<script>
    window.onload = function ()
    {
        var enlaces = document.getElementsByTagName("a");
        var articulos = document.getElementsByTagName("article");
        var index = 0;
                
        for (var i = 0; i < enlaces.length; ++i)
        {
            enlaces[i].onclick = function ()
            {           
                for (var j = 0; j < articulos.length; ++j)
                    articulos[j].style.display = "none";
                    
                index = Number.parseInt(this.innerHTML.substring(this.innerHTML.length-2), 10);
                articulos[index-1].style.display = "block";
            }
        }
    }
</script>

<main>
    <nav>
        <ul>
            <li><a href="">Opción 1</a></li>
            <li><a href="">Opción 2</a></li>
            <li><a href="">Opción 3</a></li>
        </ul>
    </nav>
    
    <section>
        <article>Artículo 1</article>
        <article>Artículo 2</article>
        <article>Artículo 3</article>
    </section>
</main>

¿Cómo puedo solucionarlo?

Muchas gracias.

1 respuesta 1

1

Ese comportamiento sucede porque no estás especificando un href para tu página por lo que al hacer click carga por completo la página, puedes modificar el código agregar el símbolo de gato en el href, eso evitará que vuelvas a cargar el index.html, puedes ver la modificación en el siguiente fragmento:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      nav {
        width: 12%;
        float: left;
      }

      li a {
        display: block;
      }

      section {
        width: 85%;
        float: left;
      }

      article {
        display: none;
      }
    </style>

    <script>
      window.onload = function () {
        var enlaces = document.getElementsByTagName("a");
        var articulos = document.getElementsByTagName("article");
        var index = 0;

        for (var i = 0; i < enlaces.length; ++i) {
          enlaces[i].onclick = function (e) {
              e.preventDefault();
            for (var j = 0; j < articulos.length; ++j)
              articulos[j].style.display = "none";

            index = Number.parseInt(
              this.innerHTML.substring(this.innerHTML.length - 2),
              10
            );
            articulos[index - 1].style.display = "block";
          };
        }
      };
    </script>

    <main>
      <nav>
        <ul>
          <li><a href="#" >Opción 1</a></li>
          <li><a href="#" >Opción 2</a></li>
          <li><a href="#" >Opción 3</a></li>
        </ul>
      </nav>

      <section>
        <article>Artículo 1</article>
        <article>Artículo 2</article>
        <article>Artículo 3</article>
      </section>
    </main>
  </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.