Mostrar Conjunto de Imagenes

[Alexis88]

Una práctica manera de hacer lo que buscas usando clases, es aplicando una determinada clase al elemento que se desea mostrar y quitársela al elemento que actualmente la posee, para lo cual lo buscaré mediante dicha clase.

En este pequeño ejemplo, hago uso de la delegación de eventos y así no tener que utilizar un bucle para aplicar el evento a cada opción.

Código HTML:

<ul>
    <li>Opción 1</li>
    <li>Opción 2</li>
    <li>Opción 3</li>
</ul>
<div id = "contenedor">
    <img src = "imagen1.jpg" class = "noVisible" />
    <img src = "imagen2.jpg" class = "noVisible" />
    <img src = "imagen3.jpg" class = "noVisible" />
</div>
 

Código CSS:

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

Código Javascript:

var ul = document.querySelector("ul"),
    ulLi = ul.querySelectorAll("li"),
    img = document.querySelectorAll("#contenedor img"),
    elem, pos, vis;
 
ul.addEventListener("click", function(event){
    elem = event.target;
    if (elem.tagName == "LI"){
        pos = [].indexOf.call(ulLi, elem);
        vis = document.querySelector(".visible") || null;
        if (vis){
            vis.className = "noVisible";
        }
        img[pos].className = "visible";
    }
}, false);
 

DEMO

Primero, tomo a la lista desordenada, al conjunto de opciones que este posee y al conjunto de imágenes del contenedor, además, declaro tres variables que usaré más adelante.

Cuando se produzca el evento click en la lista desordenada, ejecuto una función en la cual almaceno en una de las tres variables finales al elemento que acaba de ser pulsado, luego, verifico si se trata de una opción de la lista; de ser así, tomo la posición que ocupa dentro de ella (empezando a contar desde cero), luego, tomo al elemento que posea la clase visible y la asigno a otra de las variables o le asigno null si no hay (que es lo que ocurrirá la primera vez puesto que no se ven las imágenes al inicio). Enseguida, verifico si se logró encontrar algún elemento que posea dicha clase y, de ser así, se la cambio por la clase noVisible, con lo que queda oculta nuevamente. Finalmente, asigno la clase visible a la imagen cuya posición sea equivalente a la opción seleccionada.

Saludos