1. 首页
  2. 问题
  3. 如何在鼠标悬停（jQuery）上交换DIV？
一尘不染

如何在鼠标悬停（jQuery）上交换DIV？

css

这是第二简单的翻转效果，但我仍然找不到任何简单的解决方案。

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

以下代码有效，但 很糟糕 。如何以一种优雅的方式获得这种行为？jQuery具有数十种动画效果和复杂的过渡效果，但是我没有想出这种效果的干净方法。

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

阅读 197

收藏
2020-05-16

共1个答案

一尘不染

我不是在JS关闭的情况下显示所有幻灯片（这可能会破坏页面布局），而是将其放置在交换机中LIs real
A链接到服务器端代码，该代码返回在正确的交换机上预先设置了“活动”类的页面/滑动。

$(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>
2020-05-16