jQuery实现选项卡切换图片
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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;
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 class="lazy" data-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 class="lazy" data-src="img/111.jpg" alt=""></li>
<li><img class="lazy" data-src="img/222.jpg" alt=""></li>
<li><img class="lazy" data-src="img/333.jpg" alt=""></li>
<li><img class="lazy" data-src="img/444.jpg" alt=""></li>
</ul>
</div>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
