<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 });
转载于:https://www.cnblogs.com/HanselHblog/p/7578802.html
相关资源：滑动时切换页面,同时页面显示导航点进行导航,实现联动与导航效果
