如何在鼠标悬停时交换DIV？（jquery？）

问题描述：

这是第二个最简单的翻转效果，仍然没有找到任何简单的解决方案。

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

想要：项目列表和幻灯片对应列表（DIV）。加载后，应选择第一个列表项（粗体），第一个幻灯片应可见。当用户将鼠标悬停在另一个列表项目上时，应该选择该列表项目，并显示相应的幻灯片。

Wanted: I have a list of items and a correspoding list of slides (DIVs). After loading, the first list item should be selected (bold) and the first slide should be visible. When the user hovers over another list item, that list item should be selected instead and the corresponding slide be shown.

以下代码可以正常工作， / em>。我如何以优雅的方式得到这种行为？ jquery有几十个动画和复杂的翻转效果，但我没有想出一个干净的方式为这种效果。

The following code works, but is awful. How can I get this behavior in an elegant way? jquery has dozens of animated and complicated rollover effects, but I didn't come up with a clean way for this effect.

<script type="text/javascript">
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';
}
</script>

<ul id="switches">
  <li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide</li>
  <li id="switch2" onmouseover="switchTo(2);">Second slide</li>
  <li id="switch3" onmouseover="switchTo(3);">Third slide</li>
  <li id="switch4" onmouseover="switchTo(4);">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>

答

可能会破坏页面布局）我将放置在开关LIs实际A链接到服务器端代码，它返回页面上的活动类预设在正确的开关/幻灯片。

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

<html>

<head>

  <title>test</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="switch.js"></script>

</head>

<body>

  <ul id="switches">
    <li class="active">First slide</li>
    <li>Second slide</li>
    <li>Third slide</li>
    <li>Fourth slide</li>
  </ul>
  <div id="slides">
    <div class="active">Well well.</div>
    <div>Oh no!</div>
    <div>You again?</div>
    <div>I'm gone!</div>
  </div>

</body>

</html>

如何在鼠标悬停时交换DIV？ （jquery？）

相关推荐

如何在鼠标悬停时交换DIV？（jquery？）