Activando y desactivando la Div a través de jQuery

Stackoverflowers!

En las últimas publicaciones, todos me han ayudado a llegar muy lejos y ahora estoy enfrentando otro problema si pueden ayudarme, también creo que las últimas veces no las he explicado muy bien, así que aquí va.

Tengo 3 id divs, llamados: white, v2black, v3black. Mi objective es tener un navegador de hipervínculos que active y desactive cada Div. sin embargo, cuando se hace clic en uno, debe ocultar el div activo actual para que dos no estén visibles al mismo tiempo.

Solo por si acaso, el enlace para la fuente y el sitio en vivo es: www.steveatattooartist.com

He intentado lo suficiente y aquí es donde estoy ahora:

Mi jQuery:

 jQuery(function() { $('.toggle').on('click', function() { var id = $(this).attr('data-for'); $('#' + id).toggle(); }); });  

Mi estructura Html:

 
<img src="https://stackoverflow.com/questions/9474148/toggling-the-divs-on-and-off-through-jquery/" width="425" alt="Biography Image" />

<img src="https://stackoverflow.com/questions/9474148/toggling-the-divs-on-and-off-through-jquery/" width="425" alt="Biography Image" />

<img src="https://stackoverflow.com/questions/9474148/toggling-the-divs-on-and-off-through-jquery/" width="425" alt="Biography Image" />

Realmente espero que alguien pueda ayudarme porque ustedes me han ayudado seriamente a llegar muy lejos en este proyecto y lo agradezco ¡MUCHO!

Tu div necesita tener un atributo común (p. Ej., Clase), para que puedas ocultarlos todos primero y luego mostrar el div activo. La clase de toggle es común para todos ellos, entonces:

 $('.toggle').on('click', function() { $(".toggle").hide(); var id = $(this).attr('data-for'); $('#' + id).show(); }); 

ACTUALIZAR:

Usando la consola en mi navegador, cambié los enlaces para que se vean así:

   

luego reasigné los manejadores de clics así:

 $('ul.navigation a[data-for]').click(function (e) { var targetDiv = $(this).attr('data-for'); $('div.common').hide(); $('div#' + targetDiv).show(); e.preventDefault(); return false; }); 

Probablemente también quieras hacer:

 $('div.common').hide(); $('div#white').show(); 

en algún lugar en $(document).ready() para que solo se muestre inicialmente white div white .

Esto pareció tener el efecto deseado. Pruebe estos cambios y díganos si le funcionó.

– respuesta anterior a continuación –

Un par de sugerencias:

  1. La línea

    probablemente sea

    lugar.

  2. La única diferencia real entre div.altstevenav y div.delstevenav es el elemento contenedor. Debes proporcionar los enlaces en un atributo de id diferente o considerar no usar atributos de id .
  3. Los divs v2black y v3black son ambos hijos del div white . Debes convertirlos en hermanos de la div white , ya sea moviéndolos fuera de la div white o usando la div actual (con id="white" ) como un contenedor div (sin atributo id ) y haciendo una nueva div infantil del contenedor con id="white" lugar.
  4. Para los enlaces que desea utilizar para desencadenar la acción div de visibilidad y alternancia, debe mover los atributos de data-for a esos enlaces en lugar de a los divs de destino.

Ejemplo de enlaces (Punto 2):

       

o

        

Luego puede usar el siguiente jQuery para hacer el trabajo (Punto 4):

 $('a[data-for]').click(function (e) { var targetDiv = $(this).attr('data-for'); $('div.toggle').hide(); $(targetDiv).show(); e.preventDefault(); return false; }); 

alternar para ocultar no los actuales:

 $('.toggle').on('click', function() { $(".toggle").not('#' + $(this).data('for')).hide(); }); 
Intereting Posts