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.