abstract：<!doctype html> <html> <head> <meta charset="UTF-8"> <title>jquery豎導航條</title>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery豎導航條</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{padding:0px;margin:0px;}
body{background:#CCCC33;}
.top{width:100px;height:160px;border:1px solid #336699;border-radius:5px;background:#336699;margin:10px 0px 0px 8px;box-shadow:5px 3px 2px #99CCFF;}
ul{list-style:none;font-size:18px;}
li{width:100px;height:30px;float:left;text-align:center;line-height:30px;}
a{color:#fff;text-decoration:none;}
.n1{width:100px;height:3px;background:#CC6600;z-index:3;margin-top:28px;box-shadow:0 10px 20px yellow;position:relative;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('li').hover(//用hover來控制動畫的切換效果
function(){
$x=parseInt($(this).attr('name'))*30//獲取到當前元素的name值，用parseInt返回整數(shù)，再乘以li的高度，賦值給變量x
$('.n1').stop().animate({top:$x+'px'},300)//移動div框到當前l(fā)i標簽下方
},
function(){
$('.n1').stop().animate({top:'0px'},300)//div框返回原來位置
}
)
})
</script>
<div class="top">
<ul>
<li name="0"><a href="#">網(wǎng)站首頁</a></li>
<li name="1"><a href="#">新聞資訊</a></li>
<li name="2"><a href="#">服務(wù)范圍</a></li>
<li name="3"><a href="#">營業(yè)網(wǎng)店</a></li>
<li name="4"><a href="#">聯(lián)系方式</a></li>
</ul>
<div class="n1"></div>
</div>
</body>
</html>
Correcting teacher：滅絕師太Correction time：2019-01-24 10:19:00
Teacher's summary：完成的不錯，案例中帶有備注的的習慣繼續(xù)保持哦！