导航栏跟随效果

模板代码：

<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