gpt4 book ai didi

javascript - 你如何在鼠标悬停时交换 DIV (jQuery)?

转载 作者:技术小花猫 更新时间:2023-10-29 12:10:08 26 4
gpt4 key购买 nike

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

需要:我有一个元素列表和一个相应的幻灯片列表 (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>

最佳答案

我不会在 JS 关闭时显示所有幻灯片(这可能会破坏页面布局)我会在开关 LI 中放置一个真正的 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>

关于javascript - 你如何在鼠标悬停时交换 DIV (jQuery)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34536/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com