模板代码：
<nav class="nav fl">
<a class="nav-item current">
<div class="nav-text text-cur">首页</div>
<div class="line-nav"></div>
</a>
<a class="nav-item" href="teachers.html">
<div class="nav-text">严选外教</div>
<div class="line-nav"></div>
</a>
<a class="nav-item" href="system.html">
<div class="nav-text">学习体系</div>
<div class="line-nav"></div>
</a>
<a class="nav-item" href="class.html">
<div class="nav-text">如何上课</div>
<div class="line-nav"></div>
</a>
<a class="nav-item" href="system.html">
<div class="nav-text">关于我们</div>
<div class="line-nav"></div>
</a>
</nav>
样式代码：
.nav {
width: 440px;
height: 40px;
line-height: 40px;
.nav-item {
float: left;
box-sizing: border-box;
height: 40px;
color: #fff;
padding-right: 17px;
.text-cur {
color: #ff9812;
}
.line-nav {
height: 4px;
border-radius: 2px;
}
}
.current {
.line-nav {
background: #ff9812;
}
}
}
逻辑代码：
//导航下划线跟随效果
var curIndex = $(".current").index(); //当前页面索引
$('.nav-item').hover(function(){
$('.nav-item').eq(curIndex).removeClass("current"); //移除当前页面项的下划线
$(this).addClass("current"); //添加当前移入项的下划线
},function(){
$(this).removeClass("current"); //移除当前移入项的下划线
$('.nav-item').eq(curIndex).addClass("current"); //添加当前页面项的下划线
})
效果展示：
导航栏跟随效果.png
