Skip to main content
1 de 5
Dєηyη Crawford
  • 1.7k
  • 1
  • 11
  • 26

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 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.

Dєηyη Crawford
  • 1.7k
  • 1
  • 11
  • 26