下划线跟随菜单作业
通过学习，理解了jQuery的hover()的灵活使用，本次作业利用a标签重新布局导航菜单，利用hover(）实现下划线跟随效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下划线跟随导航作业</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- <script src="jquery-3.3.1.min.js"></script> -->
<style>
* {
padding: 0;
margin: 0;
}
a {
color: #fff;
text-decoration: none;
line-height: 40px;
}
.nav {
width: 100%;
background-color: hotpink;
position: relative;
}
.menu {
display: flex;
justify-content: space-between;
width: 1200px;
margin: 0 auto;
text-align: center;
}
.menu a {
width: 100px;
padding-right: 100px;
text-align: center;
position: relative;
}
.line {
position: relative;
left: 0px;
width: 100px;
border: 2px solid rgb(120, 28, 240);
}
</style>
</head>
<body>
<div class="nav">
<div class="menu">
<a href="" id='1'>公司简介</a>
<a href="" id='2'>公司荣誉</a>
<a href="" id='3'>服务项目</a>
<a href="" id='4'>技术支持</a>
<a href="" id='5'>人才招聘</a>
<a href="" id='6'>意见反馈</a>
</div>
<div class="line"></div>
</div>
<script>
$(function () {
$('.line').stop().animate({ left: '200px' }, 300);
$('a').hover(
function () {
$px = parseInt($(this).attr('id')) * 200
$('.line').stop().animate({ left: $px + 'px' }, 300)
},
function () {
$('.line').stop().animate({ left: '200px' }, 300)
}
)
})
</script>
</body>
</html>