摘要： 通過該實(shí)例的學(xué)習(xí)讓我對jQuery動(dòng)畫有了更新的認(rèn)識，感覺老是講的這個(gè)下劃線跟著導(dǎo)航走有點(diǎn)麻煩，我自己用添加類和刪除類做了一個(gè)下劃線跟著導(dǎo)航走的實(shí)例，實(shí)例如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下劃線
通過該實(shí)例的學(xué)習(xí)讓我對jQuery動(dòng)畫有了更新的認(rèn)識，感覺老是講的這個(gè)下劃線跟著導(dǎo)航走有點(diǎn)麻煩，我自己用添加類和刪除類做了一個(gè)下劃線跟著導(dǎo)航走的實(shí)例，實(shí)例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下劃線跟著導(dǎo)航走</title>
<link rel="shortcut iocn" type="image/x-icon" href="../picture/mi.png">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
.menu{width: 450px;height: 44px;margin: 0px auto;margin-top: 20px;background-color: #ccc;}
.oneMenu li{float: left;width: 100px;height: 40px;line-height: 40px;text-align: center;/*border-bottom: 4px solid pink;*/list-style: none;margin: 0px auto;cursor: pointer;}
.bt{border-bottom: 4px solid pink;}
</style>
</head>
<body>
<!-- 導(dǎo)航條menu -->
<div>
<ul>
<li>首頁</li>
<li>視頻</li>
<li>新聞</li>
<li>體育</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
// 鼠標(biāo)移上出現(xiàn)下劃線
$('.oneMenu>li').mousemove(function(){
$(this).addClass('bt');
})
// 鼠標(biāo)離開下劃線消失
$('.oneMenu>li').mouseleave(function(){
$(this).removeClass('bt')
})
})
</script>
</body>
</html>
批改老師：韋小寶批改時(shí)間：2018-12-13 17:05:19
老師總結(jié)：寫的很不錯(cuò)哦！課后記得多練習(xí)練習(xí)類似的案例哦！