Javascript 如何使活动页面的右侧有边框？

我有一个导航栏，按钮有悬停效果。我试图使它成为这样，每当一个页面处于活动状态时，按钮的右侧有一个边框，以显示当前打开的页面。我已经准备好了所有的东西，但我不知道为什么它不工作

函数homeTransition（）
{   
$（this.toggleClass（'activePage'）；
if（document.getElementById（“aboutContent”）.className.indexOf（“slideInLeft”）！=-1）{
document.getElementById（“aboutContent”）.className=“动画幻灯片”；
}
if（document.getElementById（“projectsContent”）.className.indexOf（“slideInUp”）！=-1）{
document.getElementById（“项目内容”）.className=“动画幻灯片”；
}
if（document.getElementById（“contactContent”）.className.indexOf（“slideInUp”）！=-1）{
document.getElementById（“contactContent”）.className=“动画幻灯片”；
}
document.getElementById（“homeContent”）.className=“动画bounceInDown”；
}
关于transition（）的函数
{   
$（this.toggleClass（'activePage'）；
document.getElementById（“homeContent”）.className=“动画反弹”；
document.getElementById（“aboutContent”）.style.visibility=“visible”；
document.getElementById（“aboutContent”）.className=“activePage动画幻灯片左侧”；
document.getElementById（“项目内容”）.className=“动画幻灯片”；
document.getElementById（“contactContent”）.className=“动画幻灯片”；
}
函数projectTransition（）
{   
$（this.toggleClass（'activePage'）；
document.getElementById（“homeContent”）.className=“动画反弹”；
document.getElementById（“项目内容”）.style.visibility=“可见”；
document.getElementById（“项目内容”）.className=“activePage动画幻灯片”；
document.getElementById（“aboutContent”）.className=“动画幻灯片”；
document.getElementById（“contactContent”）.className=“动画幻灯片”；
}
函数contactTransition（）
{
$（this.toggleClass（'activePage'）；
document.getElementById（“homeContent”）.className=“动画反弹”；
document.getElementById（“contactContent”）.style.visibility=“可见”；
document.getElementById（“contactContent”）.className=“activePage动画幻灯片”；
document.getElementById（“aboutContent”）.className=“动画幻灯片”；
document.getElementById（“项目内容”）.className=“动画幻灯片”；
}
//菜单
$（函数（）{
函数展开（）{
$（this.toggleClass（“on”）；
$（“.menu”）.toggleClass（“活动”）；
};
$（'.noselect'）。单击（函数（）{
$（'.noselect'）.removeClass（'activePage'）；
$（this.toggleClass（'activePage'）；
});
$（“.button”）。打开（'单击'，展开）；
});
正文{
字体系列：“源Sans-Pro”，无衬线；
颜色：#ccc；
z指数：-100；
背景色：黑色；
溢出：隐藏；
文本对齐：居中；
}
.菜单{
位置：固定；
排名：0；
左：0；
底部：0；
填充：0；
溢出：隐藏；
背景：rgba（0,0,0,0.6）；
宽度：250px；
框大小：边框框；
过渡：所有250ms；
-webkit转换：translateZ（0）translateX（-100%）；
转化：translateZ（0）translateX（-100%）；
文本对齐：居中；
盒影：0 10px#000；
}
.主动{
变换：translateZ（0）translateX（0）；
变换：translateZ（0）translateX（0）；
-webkit转换：0.4s；
过渡：0.4s；
颜色：#E5；
}
保险商实验室{
填充：0；
列表样式：无；
字体大小：.875em；
}
李{
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
字体系列：“雷威”；
宽度：250px；
填充：16%2%；
颜色：#A7A7；
字号：1.8em；
字体大小：300；
光标：指针；
过渡：全部。4s轻松进出；
}
李：悬停{
颜色：白色；
背景色：#38d8b4；
-o-转变：.6s；
-ms转换：.6s；
-moz跃迁：.6s；
-webkit转换：.6s；
过渡：.6s；
}
李先生{
过渡：所有.1都易于输入输出；
颜色：白色；
右边框：8px实心#38d8b4；
}
.activePage li:悬停{
右边框：8px实心#38d8a1；
背景：rgba（0,0,0,0.6）；；
}
liSeperator先生{
宽度：100%；
填充：.5%；
颜色：（0,0,0,4）；
}
.内容{
位置：相对位置；
宽度：240px；
}
.按钮{
宽度：22px；
高度：40px；
利润率：80px 97px；
填充：10px；
光标：指针；
转换：所有.2易入易出；
}
.按钮：悬停{
转换：比例（1.2）；
}
.线路{
宽度：40px；
高度：2倍；
背景色：#fff；
过渡：变换0.3s缓和，背景0.3s缓和，不透明度0.3s缓和，顶部0.3s缓和；
}
.第一行{
变换：translateX（-10px）translateY（22px）旋转（-90度）；
}
.第二行{
变换：translateX（-10px）translateY（19px）旋转（0度）；
}
.button.on.line.top{
宽度：40px；
变换：translateX（-10px）translateY（20px）旋转（45度）；
}
.button.on.line.bottom{
宽度：40px；
变换：translateX（-10px）translateY（17px）旋转（-45度）；
}

菜单


家


关于

.activePage {
   border-right: 8px solid #38d8a1;
   background: rgba(0, 0, 0, 0.6);;
 }
 .activePage:hover {
   border-right: 8px solid red;
 }