如何在鼠标悬停(jQuery)上交换DIV?

如何在鼠标悬停(jQuery)上交换DIV?,第1张

如何在鼠标悬停(jQuery)上交换DIV?

我不是在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 >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></body></html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5150056.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-18
下一篇 2022-11-17

发表评论

登录后才能评论

评论列表(0条)

保存