Javascript Jquery SVG循环导航

导航工作正常，但活动状态应以更好的方式显示：

--如果圆处于活动状态，它将保持活动状态(

--返回到活动的a类

所以，如果向下翻页保持活动，如果向上翻页（返回），则删除活动类

目前只有一个班级活跃起来

我希望有道理。请问一个问题，这是一个非常好的动画，但需要更多的工作

我将发布一个演示代码

还有

$（文档）.ready（函数（）{
变量$half=$（“.circle.half”），
halfLen=$half[0]。getTotalLength（），
$nav=$（“.circle.active nav”），
navLen=$nav[0]。getTotalLength（），
$pages=$（“.pages”），
滚动=错误，
curPage=1，
numopages=$（“.page”）.length，
headingH=$（“.heading”）.height（），
SPHASE1=500，
SPHASE2=300，
SPHASE3=900，
SDELAY=SPHASE1+SPHASE2+SPHASE3，
SDUR=500，
SDOTS=SDLAY+SDUR，
DOTTRANSTIME=300，
SDOTSRDY=SDOTS+dottrantime+（numOfPages-2）*100，
页面转换=500；
TweenMax.to（$half.5，{strokeDasharray:halfLen，strokedashcoffset:halfLen，ease:Power1.easeOut}，0）
TweenMax.to（$nav.5，{strokeDasharray:navLen，strokedashcoffset:navLen，ease:Power1.easeOut}，0）
$half.delay（SDELAY）.velocity（{strokedashcoffset:0}，{duration:SDUR，easing:ease in}）；
setTimeout（函数（）{
美元（“.nav”）.addClass（“显示可见”）；
}，SDOTS）；
setTimeout（函数（）{
$（“.NavEl”）.removeClass（“显示”）.addClass（“白色”）；
美元（“.nav-el-1”）.addClass（“活动”）；
$（“.heading”）.removeClass（“不可见”）；
$pages.removeClass（“已删除”）；
setTimeout（函数（）{
激活手柄（）；
}，页面转换+300）；
}，SDOTSRDY）；
函数分页（第页）{
滚动=真；
curPage=page；
$（“.NavEl”）.removeClass（“活动”）；
$（“.nav el-”+页）.addClass（“活动”）；
var newNavLen=navLen-navLen/5*（第1页）；
$nav.velocity（{strokedashcoffset:newNavLen}，{duration:PAGETRANSITION}）；
$（“.numbers”）.css（“transform”、“translateY”（+（0-（第1页）*headingH）+“px”）；
$pages.css（“transform”，“translate3D（0）”+（0-（第1页）*100）+“%，0）”；
setTimeout（函数（）{
滚动=假；
}，页面转换）；
如果（$（“.nav el-”）.hasClass（'active'））{
console.log（'如果处于活动状态'）
}否则{
console.log（'else active'）
}
}
函数激活句柄（）{
$（document）.on（“click”，“.nav el”，function（））{
var pg=+$（this.attr（“数据页”）；
分页（pg）；
});
$（窗口）。调整大小（函数（）{
headingH=$（“.heading”）.height（）；
});
}
var-diff=0；
})；

@font-face{
src:url（“https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/polar.otf");
字体系列：Polar；
}
*，*：之前，*：之后{
框大小：边框框；
保证金：0；
}
.即刻{
转换：所有0！重要；
}
html，正文{
字体大小：62.5%；
身高：100%；
溢出：隐藏；
背景#90CAF9；
}
@介质（最大宽度：960像素）{
html，正文{
字体大小：50%；
}
}
@介质（最大宽度：768px）{
html，正文{
字体大小：40%；
}
}
@介质（最大宽度：480px）{
html，正文{
字体大小：30%；
}
}
.现场{
位置：相对位置；
身高：100%；
}
.圆圈{
z指数：4；
位置：固定；
顶部：计算（50%-20雷姆）；
左：计算（50%-20雷姆）；
宽度：40雷姆；
高度：40雷姆；
不透明度：1；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.旋转器{
z指数：2；
位置：绝对位置；
最高：50%；
左：50%；
宽度：500雷姆；
高度：500雷姆；
-webkit转换：translateX（-50%）translateY（-50%）；
转化：translateX（-50%）translateY（-50%）；
背景#020202 ;；
边界半径：50%；
}
.旋转器。相位1{
宽度：0.1rem；
高度：0.1rem；
过渡：宽度0.5s，高度0.5s；
}
.旋转器{
宽度：2.5雷姆；
高度：2.5雷姆；
过渡：宽度0.3s立方贝塞尔（0.72,0.17,0.68,1.46），高度0.3s立方贝塞尔（0.72,0.17,0.68,1.46）；
}
.旋转器{
宽度：1em；
高度：1公厘；
-webkit变换：translateX（-50%）translateY（-50%）旋转（180度）；
变换：translateX（-50%）translateY（-50%）旋转（180度）；
过渡：宽度0.1s，高度0.1s，不透明度0.4s1.3s，-webkit变换0.6s1.87s易用；
过渡：宽度0.1s，高度0.1s，变换0.6s 0.87s缓进，不透明度0.4s 1.3s；
过渡：宽度0.1s，高度0.1s，变换0.6s 0.87s缓进，不透明度0.4s 1.3s，-webkit变换0.6s 0.87s缓进；
不透明度：0；
}
.旋转器.相位3.旋转器--线路{
最大宽度：20雷姆；
}
.rotater.phase3.rotater--line:after{
-webkit转换：规模（1）；
变换：比例（1）；
}
.旋转器-直线{
位置：绝对位置；
顶部：calc（50%-0.1rem）；
左：50%；
-webkit转换来源：0%50%；
变换原点：0%50%；
宽度：20雷姆；
最大宽度：0；
高度：0.2rem；
背景#020202 ;；
过渡：最大宽度0.5s 0.1s；
将更改：最大宽度；
}
.旋转器--行：之后{
内容：“；
位置：绝对位置；
顶部：-0.4rem；
左：19.4rem；
宽度：1em；
高度：1公厘；
背景#020202 ;；
边界半径：50%；
-webkit变换：缩放（0）；
变换：比例（0）；
转换：-webkit转换0.2s 0.55s三次贝塞尔（0.72,0.17,0.68,1.46）；
变换：变换0.2s 0.55s三次贝塞尔（0.72,0.17,0.68,1.46）；
转换：转换0.2s 0.55s立方贝塞尔（0.72,0.17,0.68,1.46），-webkit转换0.2s 0.55s立方贝塞尔（0.72,0.17,0.68,1.46）；
}
.旋转器--line.左{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
导航要素{
z指数：5；
位置：固定；
顶部：计算（50%-20雷姆）；
左：计算（50%-20雷姆）；
宽度：40雷姆；
高度：40雷姆；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.标题{
位置：绝对位置；
顶部