导航条滑动效果, 并且在点击后选中当前页面的导航栏选项

<ul class="nav_bar">
   <li><a href="index.html">首页</a></li>
   <li><a href="solution.html">解决方案</a></li>
   <li><a href="company_case.html">公司案例</a></li>
   <li><a href="news_information.html">新闻动态</a></li>
   <li><a href="about_WizardTech.html">关于我们</a></li>
   <i id="nav_bar_slip"></i>
</ul>

function navBar(index){
    var navSlip = $('#nav_bar_slip');
    var navA = $(".nav_bar li").eq(index).find('a');
    navSlipLeft = navA.position().left;
    var leftPos,newWidth,$el;
    navSlip.css({
        'width':navA.width(),
        'left' :navSlipLeft + 'px',
    });
    var navSlip_l = navSlip.position().left;
    var navSlip_w = navSlip.width();
    $(".nav_bar li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $el.css("color", "#3987EF");
        navSlip.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $el.css("color", "#484848");
        navA.css('color', '#3987EF');
        navSlip.stop().animate({
            left: navSlip_l,
            width: navSlip_w
        });    
    });  
}
 var windowUrl=window.location.href; // 获取当前页面的url
 var urlstatus = false;
 var index = 0;
$(".nav_bar li a").each(function(){
    if ((windowUrl + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href')!='') {
        index = $(this).parent().index()
        navBar(index);
        $(this).css("color","#3987EF");
        urlstatus = true;
    }
});