摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="jquery-3.3.1.min.js&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="jquery-3.3.1.min.js"></script>
<title>Tab切换</title>
<style type="text/css">
* {margin:0;padding:0;}
body{background:#ECF0F1;}
.menu{
width: 510px;
height: 35px;
background:#582705;
box-shadow: #582705 5px 5px 10px;
position: relative;
border-radius: 5px;
margin: 0 auto;
}
.border{
border-right: 1px solid white;
}
ul{
position: relative;
}
ul li{
float: left;
width: 100px;
line-height: 35px;
height: 35px;
text-align: center;
color: white;
list-style: none;
cursor: pointer;
}
.block{
width:100px;
height: 3px;
background:#150A03;
top:35px;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li class="border" name="0">首页</li>
<li class="border" name="1">个人介绍</li>
<li class="border" name="2">重要新闻</li>
<li class="border" name="3">诗歌散文</li>
<li name="4">留言板</li>
</ul>
<div class="block"></div> <!--此处的DIV必须在内部-->
</div>
<script>
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100;
$('.block').stop().animate({left:$x+'px'},500);
},
function(){
$('.block').stop().animate({left:'0'},500)
})
})
</script>
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-11 09:14:54
老师总结：可以尝试不同方法,完成的不错,知识点不扎实的地方可以加上备注
