How do you swap DIVs on mouseover (jQuery)?

Question

This most be the second most simple rollover effect, still I don\'t find any simple solution.

Wanted: I have a list of items and a corresponding lis

Answer 1

Rather than displaying all slides when JS is off (which would likely break the page layout) I would place inside the switch LIs real A links to server-side code which returns the page with the "active" class pre-set on the proper switch/slide.

$(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;
}

  

  
  





  

    
First slide
    
Second slide
    
Third slide
    
Fourth slide
  
  

    
Well well.
    
Oh no!
    
You again?
    
I'm gone!