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, 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:
Ejemplo:
// 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>
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 stateCookie = 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() condicionando para que no funcione si la cookie no existe aun.
if (stateCookie != undefined) {
$(".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"));
});
});
Aquí te dejo un fiddle funcional.
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.
window.location.href="index.html#loaded
que va a la página inicio al recargar, pero me gustaría que recargue en la activa. Lo incluyo en la pregunta.