¿Cómo se intercambian los DIV en mouseover? (jquery?)

Este es el segundo efecto de rollover más simple, aún así no encuentro ninguna solución simple.

Se busca: tengo una lista de elementos y una lista de diapositivas (DIV) correspondiente. Después de cargar, se debe seleccionar el primer elemento de la lista (negrita) y la primera diapositiva debe estar visible. Cuando el usuario pasa el cursor sobre otro elemento de la lista, ese elemento de la lista debe seleccionarse en su lugar y se mostrará la diapositiva correspondiente.

El siguiente código funciona, pero es horrible . ¿Cómo puedo obtener este comportamiento de una manera elegante? jquery tiene docenas de efectos de rollover animados y complicados, pero no encontré una manera limpia para este efecto.

 function switchTo(id) { document.getElementById('slide1').style.display=(id==1)?'block':'none'; document.getElementById('slide2').style.display=(id==2)?'block':'none'; document.getElementById('slide3').style.display=(id==3)?'block':'none'; document.getElementById('slide4').style.display=(id==4)?'block':'none'; document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal'; document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal'; document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal'; document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal'; }  
  • First slide
  • Second slide
  • Third slide
  • Fourth slide
Well well.
Oh no!
You again?
I'm gone!

En lugar de mostrar todas las diapositivas cuando JS está desactivado (lo que probablemente rompería el diseño de la página) colocaría dentro del interruptor LIs enlaces reales A al código del lado del servidor que devuelve la página con la clase “activa” preestablecida en el interruptor adecuado /diapositiva.

 $(document).ready(function() { switches = $('#switches > li'); slides = $('#slides > div'); switches.each(function(idx) { $(this).data('slide', slides.eq(idx)); }).hover( function() { switches.removeClass('active'); slides.removeClass('active'); $(this).addClass('active'); $(this).data('slide').addClass('active'); }); }); 
 #switches .active { font-weight: bold; } #slides div { display: none; } #slides div.active { display: block; } 
   test     
  • First slide
  • Second slide
  • Third slide
  • Fourth slide
Well well.
Oh no!
You again?
I'm gone!

Aquí está mi versión jQuery light-markup:

   
  • First slide
  • Second slide
  • Third slide
  • Fourth slide
Well well.
Oh no!
You again?
I'm gone!

Esto tiene la ventaja de mostrar todas las diapositivas si el usuario tiene Javascript desactivado, usa muy pocas marcas HTML y el javascript es bastante legible. La función switchTo toma un número de índice de qué

  • /

    par activar, restablece todos los elementos relevantes a sus estilos predeterminados (no negrita para los elementos de la lista, display:none para los DIV) y establece la list-item deseada list-item y div en bold y display . Siempre que el cliente tenga javascript habilitado, la funcionalidad será exactamente la misma que su ejemplo original.

    Aquí está la versión jQuery:

       
    • First slide
    • Second slide
    • Third slide
    • Fourth slide
    Well well.
           
    • First slide
    • Second slide
    • Third slide
    • Fourth slide
    Well well.

    Lo único que está mal con este código (al menos para mí) es que no estás usando un bucle para procesar todos los elementos. Aparte de eso, ¿por qué no hacerlo así?

    Y con el bucle, me refiero a agarrar el elemento contenedor a través de un JQuery e iterar sobre todos los elementos secundarios, básicamente, un único liner.