jQuery实现选项卡切换图片
作者:丁七岁
这篇文章主要为大家详细介绍了jQuery实现选项卡切换图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现选项卡切换图片的具体代码,供大家参考,具体内容如下
效果:
弄出来这个效果,你需要找4张大小相同的图片,大小不一样弄出来效果会很难看
代码:
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>使用jQuery实现选项卡切换图片</title> <style> *{ margin: 0; padding: 0; } .box{ width: 533px; height: 350px; border: 1px solid plum; margin: 50px auto; } .nav>li{ list-style: none; width: 133.25px; /*总宽度除以4得到的*/ height: 50px; background: #8000ff; text-align: center; line-height: 50px; float: left; } .nav>.current{ background: #69ff8f; } .content>li{ list-style: none; display: none; } .content>.show{ display: block; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 监听选项卡的移入事件 $(".nav>li").mouseenter(function () { // 修改被移入选项卡的背景颜色 $(this).addClass("current"); // 还原其它兄弟选项卡的背景颜色 $(this).siblings().removeClass("current"); // 获取当前移出选项卡的索引 var index = $(this).index(); // 根据索引找到对应的图片 var $li = $(".content>li").eq(index); // 隐藏非当前的其它图片 $li.siblings().removeClass("show"); // 显示对应的图片 $li.addClass("show"); }); }); </script> </head> <body> <div class="box"> <ul class="nav"> <li class="current">图片1</li> <li>图片2</li> <li>图片3</li> <li>图片4</li> </ul> <ul class="content"> <li class="show"><img src="img/111.jpg" alt=""></li> <li><img src="img/222.jpg" alt=""></li> <li><img src="img/333.jpg" alt=""></li> <li><img src="img/444.jpg" alt=""></li> </ul> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。