Aparece/Desaparece -eventos o función

Hola amigos,
Como os dije soy muy muy novata en esto.
Estoy intentado hacer una web con div que aprecen y desaparecen clikando en un menu.
Al abrirse la pagina se ve un div
pero con el menu puede seleccionarse para que se vea otro ( no se si me explico bien)
Para aclararme he hecho algo parecido a una plantilla con div de colores de igual tamaño y casi...casi situados en el mismo lugar, con una pequeña diferencia para poder visualizarlos bien y ver como funciona.

Se que esto se puede hacer con una función, he encoantrado un ejemplo de una función que dos div, pero al añadir un tercero o un cuarto... todo explota.

Luego lo intento con eventos... pero tampoco lo consigo
Podéis ayudarme? Gracias

este es el codigo que he hecho...

<body>
<div class="menu">
<ul id="poster">
<li><a href="#" >ROJO</a></li>

<li><a href="#" onclick="document.getElementByid('rojo').style.display='';document.getElementByid('azul').style.display='inline' ;document.getElementByid('negro').style.display='';document.getElementByid('verde').style.display='';">AZUL</a></li>

<li><a href="#" onclick="document.getElementByid('rojo').style.display='';document.getElementByid('azul').style.display='' ;document.getElementByid('negro').style.display='inline';document.getElementByid('verde').style.display='';">NEGRO</a></li>

<li><a href="#" onclick="document.getElementByid('rojo').style.display='';document.getElementByid('azul').style.display='' ;document.getElementByid('negro').style.display='';document.getElementByid('verde').style.display='inline';">VERDE</a></li>

</ul>



</div>

<div id="cuadrado" style="border: 1px solid red; position:absolute;
left: 320px;
top: 135px;
height: 550px;
width: 800px;
text-align: center;
background-color: red;
display:'none';">Rojo</div>

<div id="azul" style="border: 1px solid blue; position:absolute;
left: 330px;
top: 145px;
height: 550px;
width: 800px;
text-align: center;
background-color: blue;">Azul</div>

<div id="negro" style="border: 1px solid black; position:absolute;
left: 340px;
top: 155px;
height: 550px;
width: 800px;
text-align: center;
background-color: black;">Negro</div>

<div id="verde" style="border: 1px solid green; position:absolute;
left: 350px;
top: 165px;
height: 550px;
width: 800px;
text-align: center;
background-color: green;">Verde</div>



</body>