Tab栏样式是比较常见的样式，掌握还是挺好的，很简单。
效果图
Tab栏： 焦点图： 本例比较重要的是排他思想，干掉其他人的，留下自己的。请在案例中自行体会吧，你会知道为啥要排他的。 PS：这里笔者只放了Tab栏的源码，因为焦点图的源码与它相差不大，会一个就行。如果有想要焦点图的童靴，可以留言或者私信~
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TAB栏
</title>
<style>
* {
padding: 0;
margin: 0;
}
.tablist {
width: 400px;
height: 350px;
border: 1px solid #000;
margin: 200px auto;
}
.tablist .nav {
list-style: none;
height: 50px;
background-color: rgba(229, 185, 102, 0.99);
overflow: hidden;
}
.tablist .nav > li {
float: left;
width: 66.6px;
line-height: 50px;
text-align: center;
}
.imgs > li {
list-style: none;
display: none;
}
.imgs > li img {
width: 400px;
height: 300px;
}
.current {
background-color: #eeeeee;
}
.imgs > .show {
display: block;
}
</style>
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function () {
var nav = $('.nav>li');
var imgs = $('.imgs>li')
nav.mouseenter(function () {
$(this).addClass('current');
$(this).siblings().removeClass('current');
var index = $(this).index();
imgs.eq(index).addClass('show');
imgs.eq(index).siblings().removeClass('show');
});
});
</script>
</head>
<body>
<div class="tablist">
<ul class="nav">
<li class="current">老婆1
</li>
<li>老婆2
</li>
<li>老婆3
</li>
<li>老婆4
</li>
<li>老婆5
</li>
<li>老婆6
</li>
</ul>
<ul class="imgs">
<li class="show"><img src="img/tabl/Ebrsuz4XQAcHWoM.jpg"/></li>
<li><img src="img/tabl/EdsvmEqWoAI4nsp.jpg"/></li>
<li><img src="img/tabl/EdYPLyIXsAE0qHa.jpg"/></li>
<li><img src="img/tabl/EeQqkc4WoAgdnfB.jpg"/></li>
<li><img src="img/tabl/wallhaven-139z5g.jpg"/></li>
<li><img src="img/tabl/wallhaven-dgl7rm.jpg"/></li>
</ul>
</div>
</body>
</html>
