版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/82803143
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>头部导航滑块 内容切换 （原创）-jq22.com</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
list-style:none;
}
body {
background-color:#f2f2f2;
}
ul {
position:relative;
width:800px;
height:40px;
border-bottom:2px solid skyblue;
margin:50px auto;
line-height:40px;
}
li {
text-align:center;
width:25%;
height:100%;
float:left;
transition:color .3s;
}
li:hover {
color:white;
}
li.bg {
position:absolute;
background:skyblue;
top:0;
left:0;
z-index:-1;
}
div.content {
position:relative;
width:800px;
min-height:300px;
line-height:300px;
margin:40px auto;
text-align:center;
border:1px solid silver;
border-radius:30px;
}
div.content>div {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
div.content>div:nth-of-type(1) {
background:wheat;
}
div.content>div:nth-of-type(2) {
background:aquamarine;
}
div.content>div:nth-of-type(3) {
background:palegreen;
}
div.content>div:nth-of-type(4) {
background:plum;
}
/* button {
display:block;
margin:0 auto;
width:120px;
height:30px;
background:#87CEEB;
color:white;
border-radius:15px;
outline:none;
} */
</style>
</head>
<body>
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li class="bg"></li>
</ul>
<div class="content">
<div style="display: block;">
<h3>内容1</h3>
</div>
<div style="display: none;">
<h3>内容2</h3>
</div>
<div style="display: none;">
<h3>内容3</h3>
</div>
<div style="display: none;">
<h3>内容4</h3>
</div>
</div>
<script>
$(function() {
const liwidth=$("li").width();
var thisindex=0;
$("ul").on("mouseover","li",function(){
let index=$(this).index();
console.log(index)
$("li.bg").stop().animate({left:index*liwidth},300,"linear",()=>{
console.log("aaa")
$(this).click(function(){
thisindex=index;
$("li.bg").stop().animate({left:thisindex*liwidth},300)
$("div.content>div").eq(thisindex).show().siblings().hide()
})
$(this).mouseout(function(){
$("li.bg").stop().animate({left:thisindex*liwidth},300,"linear")
})
})
})
});
</script>
</body>
</html>