问题。切换页面时单击javascript

我没有办法解决这个问题，我尝试了很多方法，但都不管用！我是javascript新手，所以请有人帮帮我

我想要的是：所有页面上的动画。#about稍后将链接为about.html，因此当单击时，页面将从index-重定向到about.html。但当我点击动画时，它会不会不适用？我想看到所有页面上的动画

$（文档）.ready（函数（）{
$（“.m1”）。单击（函数（）{
$（“.m1”）.css（{'color'：'black'}）；
$（.m2.m3.m4”）.css（{'color'：'white'}）；
$（“.active”）.css（{'left'：'0px'，'transform'：'skewX（20deg）}）；
});
$（“.m2”）。单击（函数（）{
$（“.m2”）.css（{'color'：'black'}）；
$（“.m1、.m3、.m4”）.css（{'color'：'white'}）；
$（“.active”）.css（{'left'：'100px'，'transform'：'skewX（20deg）}）；
});
$（“.m3”）。单击（函数（）{
$（“.m3”）.css（{'color'：'black'}）；
$（.m1.m2.m4”）.css（{'color'：'white'}）；
$（“.active”）.css（{'left'：'359px'，'transform'：'skewX（-20deg）}）；
});
$（“.m4”）。单击（函数（）{
$（“.m4”）.css（{'color'：'black'}）；
$（.m1.m2.m3”）.css（{'color'：'white'}）；
$（“.active”）.css（{'left'：'461px'，'transform'：'skewX（-20deg）}）；
});
});
正文{
边际：0px；
填充：0px；
背景色：#232323；
}
梅因先生{
位置：固定；
顶部：10px；
左：50%；
转化：translateX（-50%）；
z指数：9999；
}
.菜单{
宽度：100px；
高度：30px；
字体系列：“Stroud”；
字体大小：20px；
颜色：白色；
填充：0px；
显示：内联块；
文本对齐：居中；
线高：30px；
光标：指针；
过渡：所有0.3秒都容易进入；
}
.主动{
宽度：100px；
高度：30px；
背景色：白色；
位置：绝对位置；
顶部：33px；
左：0px；
变换：skewX（20度）；
z指数：-1；
过渡：所有0.3秒都容易进入；
}
.m1{
颜色：黑色；
}
.标志{
位置：相对位置；
顶部：首字母；
利润率：0px 30px；
}
a{
显示：内联块；
}

关于
接触
文件夹
命令
这是我为您创建的。似乎没有什么问题。到底是什么问题？当您将动画更改为
.html
链接时，动画将无法继续。每次在浏览器中加载页面时，它都会替换当前状态。他可以用iframe替换页面内容，并让链接更改iframe的来源，但这可能不是最佳解决方案。它会保留动画，但老实说，我愿意牺牲形式来换取功能。@JoelTrauger标签后面的白色框在JSFIDLE中没有显示。我希望所有页面都有动画，但当我进入一个新的*.html页面时，动画就没有了apply@zfrisch你知道我怎么能把它们带过来吗？