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:
$(".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>
<button rel="image01" class="change">Picture 1</button>
<button rel="image02" class="change">Picture 2</button>
<button rel="image03" class="change">Picture 3</button>
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.
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 a un query selector que ya vimos como armar (no almacenamos/seteamos la cookie aquí) y hacemos los cambios, 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.