摘要：<style type="text/css"> .navCon{ min-width: 1200px; height: 43px; &nb
<style type="text/css">
.navCon{
min-width: 1200px;
height: 43px;
margin: 0 auto;
position: relative;
}
.navCon ul li{
float: left;
list-style-type: none;
background: #f1eeee;
}
.navCon ul li a{
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: red;
}
.navCon ul li:hover{
background: #cacaca;
}
.navCon ul li:hover a{
color: #002A80;
}
.navCon ul li.active{
background: #cacaca;
border-bottom: 2px solid #000000;
}
.navCon ul li.active a{
color: #002A80;
}
.bottomLine{
width: 0px;
height: 2px;
background: black;
position: absolute;
bottom: 0px;
}
.clear{
clear: both;
}
</style>
<nav class="navCon">
<ul>
<li><a href="#">導(dǎo)航1</a></li>
<li><a href="#">導(dǎo)航2導(dǎo)航2</a></li>
<li><a href="#">導(dǎo)航3導(dǎo)航3導(dǎo)航3</a></li>
<li><a href="#">導(dǎo)航4導(dǎo)航4導(dǎo)航4導(dǎo)航4</a></li>
<li><a href="#">導(dǎo)航5導(dǎo)航5導(dǎo)航5導(dǎo)航5導(dǎo)航5</a></li>
<div class="bottomLine"></div>
</ul>
</nav>
<script src="js/jquery.3.3.1.js"></script>
<script type="text/javascript">
$(".navCon ul li").hover(function(){//鼠標(biāo)移入
var left = $(this).position().left;
var width = $(this).width();
console.info("left:"+left+"width:"+width);
$(".bottomLine").css({opacity:1})
$(".bottomLine").stop().animate({
left:left,
width:width
},300);
},
function(){//鼠標(biāo)移出
$(".bottomLine").css({opacity:0})
});
$(".navCon ul li").click(function(){
$(".navCon ul li").removeClass("active");
$(this).addClass("active");
});
</script>
批改老師：查無此人批改時間：2019-06-19 09:16:06
老師總結(jié)：完成的不錯。很多寫好的樣式，可以保存下來，留著以后用。繼續(xù)加油。