用JQ写出的导航下划线跟随
根据老师课程的思路。自己写的代码。可能和老师的代码不一样。在这里主要是想锻炼一下自己使用 for循环遍历元素出来，然后对元素进行操作。
之前对于for循环比较陌生。很少用到。现在多在案例里面使用一下。多动脑，勤动手
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.nav{width:900px;height:35px;line-height:35px;color:white;text-decoration:none;margin: 20px auto;border-radius:5px 5px 0 0;background-color: #148d00;position: relative}
.nav ul{margin: 0;padding:0}
.nav li{float: left;list-style: none;text-align: center;width: 120px;color: white;}
.nav li a{text-decoration: none;color: white}
.block{width:120px;position:absolute;top:35px;height:2px;background-color:#a30c01}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var Li, i,x
Li=document.getElementsByTagName('li');
for(i=0;i<Li.length;i++){
$(Li[i]).hover(function(){
x=($(this).index())*120+'px';
$('.block').stop().animate({"left":x},500)
},
function(){
$('.block').stop().animate({"left":0},500)
}
)
}
})
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">最新资讯</a></li>
<li><a href="#">热点动态</a></li>
</ul>
<div class="block"></div>
</div>
</body>
</html>