<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab选项卡demo</title>
<script src="jquery-3.3.1.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 290px;
border: 1px solid black;
margin: 100px auto;
}
.nav>li{
list-style: none;
float: left;
width: 100px;
height: 36px;
line-height: 36px;
background-color: yellow;
text-align: center;
font-weight: bold;
/*border: 1px solid red;*/
/*box-sizing: border-box;*/
}
.nav .current{
background-color: orangered;
color:white;
}
.img>li{
list-style: none;
}
.img>li>img{
display: none;
height: 254px;
width: 400px;
}
.img>li>img.current{
display: block;
}
</style>
<script>
$(function () {
// 方法1
// $('.nav li').hover(function () {
// $(this).addClass('current').css('color','white');
// //index获取当前DOM元素在所有结果中的索引
// // console.log($(this).index());
// let index = $(this).index();
// $('.img li').eq(index).children('img').addClass('current');
//
// },function () {
// $(this).removeClass('current').css('color','black');
// let index = $(this).index();
// $('.img li').eq(index).children('img').removeClass('current');
// })
// 方法2
$('.nav li').mouseenter(function () {
$(this).addClass('current').siblings().removeClass('current');
let index = $(this).index();
$('.img>li').eq(index).children('img').addClass('current').parent()
.siblings().children('img').removeClass('current');
});
})
</script>
</head>
<body>
<div class="box">
<ul class="nav">
<li class="current">Html5</li>
<li>Jquery</li>
<li>Python</li>
<li>Go</li>
</ul>
<ul class="img">
<li><img src="./1.jpg" alt="" class="current"></li>
<li><img src="./2.jpg" alt=""></li>
<li><img src="./3.jpg" alt=""></li>
<li><img src="./4.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
效果：
