Esto pasa debido (según mi interpretación) a que estas contradiciendo un comportamiento con tus clases, ya que como notas estas escribiendo que si o si la clase `.cover` se tiene que ver, no importe el caso, para solucionar esto te propongo la siguiente lógica: No trabajes con los hash porque eso te obliga a tener contenido estático el cual no te conviene almacenar, como utilizar el id en tus botones, mejor maneja (programa) todo tu contenido con JS y ahórrate unas lineas en el html. Para el siguiente ejemplo utilizaremos solo una clase para los botones y lo relacionaremos con el contenido que quieres mostrar. Con Jquery podemos decidir cual 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: >Ejemplo: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $(".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"); }); }); <!-- language: lang-css --> .image { display: none; } <!-- language: lang-html --> <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> <button rel="image01" class="change">Picture 1</button> <button rel="image02" class="change">Picture 2</button> <button rel="image03" class="change">Picture 3</button> <!-- end snippet --> Ya que quieres que cuando la pagina recargue, se vea el contenido actual, puedes trabajar con local storage o bien con cookies. Te daré un ejemplo con un plugin bien sencillo de utilizar para almacenar cookies. [Aqui puedes informarte mejor acerca de js-cookie ][1]. >Ejemplo: (No puedo dejarlo en un codigo verificable porque no se si puedo guardar cookies en stack). Recordamos que usamos `$(".selected").show()` para mostrar la imagen al principio del codigo. Ahora solo hace falta verficar y setear cual es selected: // Obtenemos el valor de la cookie selected que almacenamos mas abajo. var estateCookie = Cookies.get("selected"); // Agregamos el valor de la cookie y hacemos los cambio, preferiblemente con .load() $(".image").removeClass("selected"); $("#"+stateCookie).addClass("selected"); $(".selected").show(); $(document).ready(function(){ $(".change").click(function(){ $(".image").hide(); $(".image").removeClass("selected"); $("#"+$(this).attr("rel")).show(); $("#"+$(this).attr("rel")).addClass("selected"); // Con cada click seteamos una cookie llamada selected con el valor de id del la foto actual, que requerimos arriba. Cookies.set("selected", $(this).attr("rel")); }); }); Y con eso terminamos, tienes un resultado sin bugs y con mejor rendimiento, quizá un poco mas engorroso, pero como ves no es nada y los errores te los ahorras mas allá de no generar una url para cada foto. Espero que te sea de ayuda, un saludo. [1]: https://github.com/js-cookie/js-cookie