Mostrar y Ocultar un div

[Alexis88]

Desde la hoja de estilos, oculta todos los <div> y crea una clase que hará visible al <div> al que se la apliques. Luego, cuando pulses cualquiera de los botones del menú, buscas al <div> que posea la clase, se la quitas y se la asignas al <div> que corresponda con la opción marcada.

Código HTML:

<nav>
    <li data-div = "a">Opción 1</li>
    <li data-div = "b">Opción 2</li>
    <li data-div = "c">Opción 3</li>
</nav>
 
<div id = "a">Contenido 1</div>
<div id = "b">Contenido 2</div>
<div id = "c">Contenido 3</div>
 

Código CSS:

div{
    display: none;
}
 
.visible{
    display: block;
}
 

Código Javascript:

var aux;
 
[].forEach.call(document.querySelectorAll("nav li"), function(li){
    li.addEventListener("click", function(){
        aux = document.querySelector(".visible");
        if (aux){
            aux.className = "";
        }
        document.querySelector("#" + this.dataset.div).className = "visible";
    }, false);
});
 

DEMO

No olvides colocar el código JavaScript luego del último elemento de tu documento HTML y justo antes de la etiqueta </body> para que surta efecto.

Saludos