<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery下滑线跟随导航</title>
<style>
html{font-size: 10px;}
body{background-color: #000;}
body,ul{margin: 0;padding: 0;}
.clearfix{overflow: hidden;_height:1%;}
.wrap{width:100vw;height:100vh;}
.topBox{position: absolute;width: 100%;height: 5vh;}
.fhNav{position:relative;box-sizing:border-box;width:100%;height:100%;background-color:rgba(103,87,87,.85);padding:0 10px}
.nav{width:100%;height:100%;font-size:1.8rem;color:#fff}
.nav li{list-style:none;float:left;min-width:5vw;text-align:center;height:5vh;line-height:5vh;cursor:pointer;padding:0 10px}
.nav li:hover{background-color:rgba(0,0,0,.9)}
.selectedNav{background-color:rgba(0,0,0,.9)}
.bottomLine{position:absolute;left:0;bottom:0;height:4px;background-color:#fff;transition:all .3s ease}
</style>
</head>
<body>
<div>
<div>
<div>
<div></div>
<ul class="nav clearfix">
<li>合肥市</li>
<li>马鞍山市</li>
<li>芜湖市</li>
<li>滁州市</li>
<li>宿州市</li>
<li>淮北市</li>
<li>淮南市</li>
<li>黄山市</li>
</ul>
</div>
</div>
</div>
<script src="/jquery.js"></script>
<script type="text/javascript">
$(".fhNav").hover(function() {},
function() {
$(".bottomLine").css("width", parseFloat($(".selectedNav").eq(0).width() + 20) + "px");
$(".bottomLine").css("left", parseFloat($(".selectedNav").eq(0)[0].offsetLeft) + "px");
}) $(".nav li").hover(function() {
$(".bottomLine").css("width", parseFloat($(this).width() + 20) + "px");
$(".bottomLine").css("left", parseFloat($(this)[0].offsetLeft) + "px");
});
$(".nav li").on("click",
function() {
$(".nav li").removeClass("selectedNav");
$(this).addClass("selectedNav");
$(".bottomLine").css("width", parseFloat($(this).width() + 20) + "px");
$(".bottomLine").css("left", parseFloat($(this)[0].offsetLeft) + "px");
})
</script>
</body>
</html>
