0

No puedo resolver este problema.

Tengo varios botones que muestran el contenido de un div. Cuando se carga la página, el primer div debe estar visible, pero oculto al hacer clic en los otros botones. Hasta aquí todo funciona correctamente con el script.

El problema es cuando el contenido mostrado es diferente al primer div y se actualiza la página, el primer div se hace visible junto con el actual. Es el comportamiento lógico basado en el script, ¿qué debo cambiar para mostrar el primer div solo cuando se carga la página o al hacer clic en el primer botón y no al refrescar cuando otro div está activo?

Buscando en internet encontré una solución alternativa window.location.href="index.html#loaded que va a la página inicio al recargar, pero me gustaría que recargue en el div activo.

$(document).ready(function() {
  $("#apa, #com, #adi").click(function() {
    if ($('.cover').css('display') == 'block') {
      $('.cover').css('display', 'none');
    }
  });
  $("#apa").click(function() {
    if ($('.cover').css('display') == 'none') {
      $('.cover').css('display', 'block');
    }
  });
});
.image {
  display: none;
}

.image:target {
  display: block;
}

.cover {
  display: block;
}

div {display:flex; margin: 0 12px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image01" class="image cover">
  <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>

<div>
<div id="apa">
    <a href="#image01">Picture 1</a>
</div>
<div id="com">
    <a href="#image02">Picture 2</a>
</div>
<div id="adi">
    <a href="#image03">Picture 3</a>
</div></div>

2
  • Al parecer no hay mucho problema en el fiddle, en que entorno se ejecuta la falla y solo pasa al recargar? Commented el 9 oct. 2018 a las 5:21
  • Si, el script funciona perfecto, el problema es cuando recargo la página desde el botón 2 o 3, la foto 1 se ve junto a la que está visible en ese momento. Buscando en internet encontré una solución alternativa 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.
    – Danielillo
    Commented el 9 oct. 2018 a las 5:31

1 respuesta 1

1

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.

4
  • Funciona perfecto, gracias por tu tiempo. Aunque creo que me tendré que leer la respuesta varias veces para entenderlo.
    – Danielillo
    Commented el 9 oct. 2018 a las 10:34
  • Ok, funciona perfecto el fiddle y la página al hacer las modificaciones y ver el resultado. Pero al editar no. Este es el ejemplo de la página en funcionamiento haciendo un copy/paste del fiddle.
    – Danielillo
    Commented el 9 oct. 2018 a las 11:11
  • Agrega todos los scripts después del body a ver que resultado te arroja, no puedo identificar el problema, déjame verificarlo en local. Commented el 9 oct. 2018 a las 14:04
  • Probado, a mi me funciona solo agregando los scripts despues de body, esto pasa porque estas ejecutando los scripts antes que el estilo, Aqui te dejo mi servidor temporal, como ves todo funciona como debería. Commented el 9 oct. 2018 a las 14:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.