<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>
1 function navBar(index){ 2 var navSlip = $('#nav_bar_slip'); 3 var navA = $(".nav_bar li").eq(index).find('a'); 4 navSlipLeft = navA.position().left; 5 var leftPos,newWidth,$el; 6 navSlip.css({ 7 'width':navA.width(), 8 'left' :navSlipLeft + 'px', 9 }); 10 var navSlip_l = navSlip.position().left; 11 var navSlip_w = navSlip.width(); 12 $(".nav_bar li a").hover(function() { 13 $el = $(this); 14 leftPos = $el.position().left; 15 newWidth = $el.parent().width(); 16 $el.css("color", "#3987EF"); 17 navSlip.stop().animate({ 18 left: leftPos, 19 width: newWidth 20 }); 21 }, function() { 22 $el.css("color", "#484848"); 23 navA.css('color', '#3987EF'); 24 navSlip.stop().animate({ 25 left: navSlip_l, 26 width: navSlip_w 27 }); 28 }); 29 } 30 var windowUrl=window.location.href; // 获取当前页面的url 31 var urlstatus = false; 32 var index = 0; 33 $(".nav_bar li a").each(function(){ 34 if ((windowUrl + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href')!='') { 35 index = $(this).parent().index() 36 navBar(index); 37 $(this).css("color","#3987EF"); 38 urlstatus = true; 39 } 40 });