摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq8</title> <script src="jquery-3.3.1.min.js"></script> &
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq8</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
*{padding: 0;margin: 0;}
ul{ list-style: none;z-index: 20; font-size: 15px;
position: relative; }
li{float: left; cursor: pointer; width: 100px;height: 30px;color:pink;background: blue; border-radius:3px; text-align: center;line-height: 30px ;font-weight: bold;}
.menu{width: 400px;position: relative; height: 32px; background: pink; border-radius: 3px; box-shadow: 0 2px 20px #000;
/*加居中下劃線不能跟隨？margin: 0px auto;*/}
/*jq下劃線跟隨導(dǎo)航案例，隨便解答下問題
先獲取li標簽的值， 用parseInt取整，向左增加x像素
使用stop()停止動畫效果，當(dāng)向左位移到x位置時停止*/
</style>
<script>
$(function(){
$('li').hover(function(){
$x=parseInt($(this).attr('name'))*100
$('.block').stop().animate({left:$x+'px'},200)
},
function(){
$('.block').stop().animate({left:'0px'},200)
}
)
})
</script>
</head>
<body>
<script>
</script>
<div>
<ul>
<li name="0">首頁</li>
<li name="1">夫是德國</li>
<li name="2">給對方</li>
<li name="3">各個地方</li>
</ul>
</div>
<div style="z-index: 10;width:100px;height: 2px;background: red;top: 30px; position: absolute; "></div>
</body>
</html>先獲取li標簽的值， 用parseInt取整，向左增加x像素，當(dāng)向左位移到x位置時停止，使用stop()停止動畫效果。有個問題：老師視頻案例中是下劃線能跟著導(dǎo)航默認居中的，我要怎么樣才能實現(xiàn)這個效果？我現(xiàn)在交的案例是不居中的，如圖
![E9TNE)W~BD}]X5TK(WDN53V.png](http://img.php.cn//upload/image/384/430/292/1541783633792043.png "1541783633792043.png")
批改老師：韋小寶批改時間：2018-11-10 09:54:47
老師總結(jié)：首先咱們先來看一下樣式！你在css中有寫.menu這個class，但是在下面的HTML代碼中并沒有class=menu的??？jQuery中又出現(xiàn)了.block而你下面的代碼中也并未出現(xiàn)class=bl