Para el siguiente ejemplo utilizaremos solo una clase para los botones y lo relacionaremos con el contenido que quieres mostrar, también en lugar de tener un estilo que haga visible una clase permanentemente, lo haremos cada vez que se ejecute el código.
Con Jquery podemos decidir cual imagen mostrar y cual no utilizando el método que te sea conveniente, en este caso utilizaremos un atributo para relacionar nuestro botón a la imagen, al que le colocaremos la id de la misma quedando así rel="imagen00"
. Después armamos un query selector para obtener el id de la imagen correspondiente al botón presionado, algo así $("#"+$(this).attr("rel"))
y es todo, mira el código:
// Mostramos la etiqueta que tenga la clase selected
$(".selected").show();
$(document).ready(function(){
$(".change").click(function(){
//Al hacer click eliminamos la clase selected y escondemos las clases .image.
$(".image").hide();
$(".image").removeClass("selected");
//Tambien cargamos la imagen actual gracias al atributo rel que usamos como id y le agregamos la clase selected a la misma.
$("#"+$(this).attr("rel")).show();
$("#"+$(this).attr("rel")).addClass("selected");
});
});
.image {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image01" class="image selected">
<img src="https://www.african.cam.ac.uk/images/secondlevel/dasshills/image_preview">
</div>
<div id="image02" class="image">
<img src="https://data.whicdn.com/images/60436988/large.png">
</div>
<div id="image03" class="image">
<img src="https://www.tawbaware.com/maxlyons/crop_8.jpg">
</div>
<!-- Usamos una sola clase para los botones, así es mas sencillo de manejar-->
<!-- Tambien agregamos nuestro relativo con la id de cada imagen-->
<button rel="image01" class="change">Picture 1</button>
<button rel="image02" class="change">Picture 2</button>
<button rel="image03" class="change">Picture 3</button>