摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>導航下劃線跟隨</title> </head> <style> *{margin:0;padding: 0} li{list-styl
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>導航下劃線跟隨</title>
</head>
<style>
*{margin:0;padding: 0}
li{list-style: none}
.menu{ width: 500px;height: 50px;margin:0 auto; background: #98c42b}
ul li{display: block;width: 100px;height: 50px;line-height: 50px;text-align: center;float: left;}
.block{width: 100px;height: 2px;background:#121461;position:relative;top: 48px;z-index: 2}
</style>
<script type='text/javascript' src="jquery-3.3.1.js"></script>
<script type='text/javascript'>
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100
$('.block').stop().animate({left:$x+'px'},200)
$(this).css('background','#fbfbfb')
},
function(){
$('.block').stop().animate({left:'0px'},200)
$(this).css('background','#98c42b')
}
)
})
</script>
<body>
<div>
<ul>
<li name='0'>首頁</li>
<li name='1'>新聞</li>
<li name='2'>案例</li>
<li name='3'>關于</li>
<li name='4'>聯系</li>
</ul>
<div></div>
</div>
</body>
</html>
批改老師：天蓬老師批改時間：2019-01-01 15:20:19
老師總結：javascript的語句之間, 還是推薦加上分號, 這樣比較好一些, 不要把這種簡寫想成想當然, 有時會麻煩的