版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yaocong1993/article/details/82634501
1、图片切换
只监听移入，siblings()处理其它兄弟节点的样式和事件。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title></title>
<style>
*{margin:0;padding:0;}
.box{width:440px;height:300px;margin:50px auto;border:1px solid;}
.nav>li{
float:left;list-style:none;
width:110px;height:50px;
text-align:center;line-height:50px;background:#ffa500;
}
.nav>.current{background:#ccc;}
.content>li{display:none;list-style:none;}
.content>.show{display:block;}
</style>
</head>
<body>
<div class="box">
<ul class="nav">
<li class="current">H5+C3</li>
<li>jQuery</li>
<li>C语言</li>
<li>Java语言</li>
</ul>
<ul class="content">
<li class="show"><img src="a.jpg" alt=""></li>
<li><img src="b.jpg" alt=""></li>
<li><img src="c.jpg" alt=""></li>
<li><img src="d.jpg" alt=""></li>
</ul>
</div>
<script src='jquery-1.12.4.js'></script>
<script>
$(function(){
// 监听选项卡移入事件
$(".nav>li").mouseenter(function(){
// 修改被移入选项卡的背景颜色
$(this).addClass("current");
// 还原其它兄弟选项卡背景颜色
$(this).siblings().removeClass("current");
// 获取当前移入选项卡的索引值
var index=$(this).index();
// 显示对应的图片
$(".content>li").eq(index).addClass("show");
// 隐藏非当前的图片
$(".content>li").eq(index).siblings().removeClass("show");
})
});
</script>
</body>
</html>2、列表内容切换
hover()监听移入移出事件。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title></title>
<style>
*{margin:0;padding:0;}
.box{width:300px;height:450px;margin:50px auto;border:1px solid;}
.box>h1{
padding-left:10px;border-bottom:1px dashed #ccc;
font-size:20px;line-height:35px;color:#ff1493;
}
ul>li{
list-style:none;
padding:5px 10px;
border:1px dashed #ccc;
}
ul>li:nth-child(-n+3) span{background:#ff1493;}
ul>li>span{
display:inline-block;
width:20px;height:20px;margin-right:10px;
line-height:20px;text-align:center;background:#ccc;
}
.content{
display:none;
margin-top:5px;overflow:hidden;
}
.content>img{
float:left;
width:80px;height:120px;
}
.content>p{
float:right;
width:180px;height:120px;
font-size:12px;line-height:20px;
}
.current .content{display:block;}
</style>
</head>
<body>
<div class="box">
<h1>电影排行榜</h1>
<ul>
<li><span>1</span>电影名称
<div class="content">
<img src="flipped.jpg" alt="">
<p>朱莉·贝克（玛德琳·卡罗尔饰）虔诚地相信三件事：树是圣洁的（特别是她最爱的梧桐树）、她在后院里饲养的鸡生出来的鸡蛋是最卫生的、以及总有一天她会和布莱斯·罗斯基（卡兰·麦克奥利菲饰）接吻。</p>
</div>
</li>
<li><span>2</span>电影名称
<div class="content">
<img src="flipped.jpg" alt="">
<p>朱莉·贝克（玛德琳·卡罗尔饰）虔诚地相信三件事：树是圣洁的（特别是她最爱的梧桐树）、她在后院里饲养的鸡生出来的鸡蛋是最卫生的、以及总有一天她会和布莱斯·罗斯基（卡兰·麦克奥利菲饰）接吻。</p>
</div>
</li>
<li><span>3</span>电影名称</li>
<li><span>4</span>电影名称</li>
<li><span>5</span>电影名称</li>
<li><span>6</span>电影名称</li>
</ul>
</div>
<script src='jquery-1.12.4.js'></script>
<script>
$(function(){
// 监听li移入移出事件
$("li").hover(function(){
$(this).toggleClass("current");
});
});
</script>
</body>
</html>