效果图：
话不多说上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
margin: 0 auto;
}
.tab {
width: 300px;
height: 442px;
}
.tab .tabs {
width: 300px;
height: 42x;
}
.tabs span {
display: inline-block;
width: 100px;
height: 40px;
background-color: green;
float: left;
text-align: center;
line-height: 40px;
color: #000;
}
.tab .tabz {
width: 300px;
height: 400px;
}
.tab .tab1 {
width: 300px;
height: 400px;
background-color: lightpink;
float: left;
}
.ta {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<p class="tabs">
<span>栏目一</span>
<span>栏目二</span>
<span>栏目三</span>
</p>
<div class="tabz">
<div class="tab1 ">栏目一</div>
<div class="tab1 ta">栏目二</div>
<div class="tab1 ta">栏目三</div>
</div>
</div>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
$('.tabs span').eq(0).css({
'backgroundColor': 'rgb(3, 101, 3)',
'color': '#fff'
});
$('.tabs span').mouseover(function() {
clearInterval(timer);
$(this).css({
'backgroundColor': 'rgb(3, 101, 3)',
'color': '#fff'
}).siblings('span').css({
'backgroundColor': 'green',
'color': '#000'
});
//实现具体栏目的显示与隐藏
$('.tabz .tab1').eq($(this).index()).removeClass('ta').siblings('.tab1').addClass('ta');
})
// 加一个定时器,根据需求，也可以不加
var timer = setInterval(dong, 1000);
var len = $('.tabs span').length;
var i = 0;
function dong() {
$('.tabs span').eq(i).css({
'backgroundColor': 'rgb(3, 101, 3)',
'color': '#fff'
}).siblings().css({
'backgroundColor': 'green',
'color': '#000'
});
//实现具体栏目的显示与隐藏
$('.tabz .tab1').eq(i).removeClass('ta').siblings('.tab1').addClass('ta');
i++;
if (i > len - 1) {
i = 0;
}
}
</script>
</body>
</html>