摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq动画导航</title><script type="text/javascript" src="jquery-3.3.1.min.js">&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq动画导航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
ul>li{display: block;}
ul{width:600px;margin: 0 auto;margin-top: 80px;}
ul>li{width:100px;height:36px;line-height: 36px;float:left;font-size: 16px;text-align: center;border-right: 1px solid #ccc;background-color: #f4f4f4;}
ul>li:nth-child(5n){border-right: none;}
.current{font-size: 18px;background-color: lightblue;height:40px;margin-top: -2px;}
ul>li:hover{background-color: lightblue;}
</style>
</head>
<body>
<ul>
<li>导航01</li>
<li>导航02</li>
<li>导航03</li>
<li>导航04</li>
<li>导航05</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
$(this).siblings('li').removeClass('current');
//$(this).animate('current',1500)
$(this).addClass('current');
})
})
</script>
</html>
批改老师：灭绝师太批改时间：2019-03-18 16:50:50
老师总结：作业和课程有点差距,下次要按要求完成相应作业,可以拓展但是要包含上课内容!
