你如何在鼠标悬停时交换DIV？(jQuery的？)

这是第二个最简单的翻转效果,但我找不到任何简单的解决方案.

通缉:我有一个项目列表和幻灯片列表(DIV).加载后,应选择第一个列表项(粗体),并且第一个幻灯片应该是可见的.当用户将鼠标悬停在另一个列表项上时,应该选择该列表项并显示相应的幻灯片.

以下代码有效,但很糟糕.我怎样才能以优雅的方式获得这种行为？jquery有几十个动画和复杂的翻转效果,但我没有想出一个干净的方式来实现这种效果.

  
First slide
  
Second slide
  
Third slide
  
Fourth slide


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

Carl Meyer.. 18

我不会在JS关闭时显示所有幻灯片(这可能会破坏页面布局),而是放置在交换机LIs real内部链接到服务器端代码,返回页面,并在正确的开关上预先设置"active"类/滑动.

$(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!
  

$(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!
  

  
First slide
  
Second slide
  
Third slide
  
Fourth slide


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

  
First slide
  
Second slide
  
Third slide
  
Fourth slide


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