你如何在鼠标悬停（jQuery）上交换 DIV？
Posted
技术标签:
【中文标题】你如何在鼠标悬停（jQuery）上交换 DIV？【英文标题】：How do you swap DIVs on mouseover (jQuery)? 【发布时间】：2010-09-07 06:22:21 【问题描述】：这几乎是第二个最简单的翻转效果，我仍然没有找到任何简单的解决方案。
需要：我有一个项目列表和相应的幻灯片列表 (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>
【问题讨论】：
【参考方案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>【讨论】：
我推荐使用数据函数而不是 this.slide：$(this).data('slide', slides[idx]);这样您就不会在 DOM 中混杂数据。【参考方案2】：这是我的轻标记 jQuery 版本：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function switchTo(i)
$('#switches li').css('font-weight','normal').eq(i).css('font-weight','bold');
$('#slides div').css('display','none').eq(i).css('display','block');
$(document).ready(function()
$('#switches li').mouseover(function(event)
switchTo($('#switches li').index(event.target));
);
switchTo(0);
);
</script>
<ul id="switches">
<li>First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div>Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I'm gone!</div>
</div>
如果用户关闭了 javascript，这具有显示所有幻灯片的优点，使用很少的 HTML 标记并且 javascript 可读性很好。 switchTo 函数接受一个索引号，其中<li> / <div> 对激活，将所有相关元素重置为其默认样式（列表项为非粗体，DIV 为display:none）并设置所需的list-item 和div 到bold 和display。只要客户端启用了 javascript，其功能将与您的原始示例完全相同。
【讨论】：
【参考方案3】：这里是 jQuery 版本：
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function ()
$("#switches li").mouseover(function ()
var $this = $(this);
$("#slides div").hide();
$("#slide" + $this.attr("id").replace(/switch/, "")).show();
$("#switches li").css("font-weight", "normal");
$this.css("font-weight", "bold");
);
);
</script>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">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>
【讨论】：
【参考方案4】：<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function()
$( '#switches li' ).mouseover(
function()
$( "#slides div" ).hide();
$( '#switches li' ).css( 'font-weight', 'normal' );
$( this ).css( 'font-weight', 'bold' );
$( '#slide' + $( this ).attr( 'id' ).replace( 'switch', '' ) ).show();
);
);
</script>
</head>
<body>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">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>
</body>
</html>
【讨论】：
【参考方案5】：这段代码唯一的问题（至少对我而言）是您没有使用循环来处理所有元素。除此之外，为什么不这样呢？
对于循环，我的意思是通过 JQuery 获取容器元素并遍历所有子元素——基本上是单线。
【讨论】：
以上是关于你如何在鼠标悬停（jQuery）上交换 DIV？的主要内容，如果未能解决你的问题，请参考以下文章