Javascript 如何使此代码笔可用于多个页面？

我正在使用我在codepen上找到的所有按钮的页面转换效果。它对我的联系人按钮很有效，但当我尝试创建其他页面时，它不起作用。因此，如果我尝试为我的“关于”按钮创建一个页面，它将不起作用，它将只使用我的联系人页面中的同一页面。所以基本上我的问题是如何使用这个代码笔创建多个按钮，每个按钮上有不同的内容

这是代码笔：

这是我网站上的按钮

/*添加了JS脚本。有关更多信息，请参阅github repo
https://github.com/fralec/ElegantJS */
$（“#联系人”）。优雅({
单击下一步关闭：true，
纽塔布：没错，
github：{
id:“”
},
推特：{
id:“”
},
邮寄：{
id:“”
},
蒸汽：{
id:“”
}
});
正文{
背景色：黑色；
字体系列：“源Sans-Pro”，无衬线；
颜色：#ccc；
z指数：-100；
背景色：黑色；
}
#家{
位置：绝对位置；
宽度：16%；
背景色：透明；
边框：2倍实心#FFF；
利润率最高：12%；
左缘：20%；
高度：3em；
颜色：#FFF；
字号：1em；
光标：指针；
文本转换：大写；
边界半径：4px；
动画：Fadein2S；
-moz动画：fadein 2s；/*Firefox*/
-webkit动画：fadein 2s；/*Safari和Chrome*/
}
#关于{
位置：绝对位置；
宽度：16%；
背景色：透明；
边框：2倍实心#FFF；
利润率最高：12%；
左缘：37%；
高度：3em；
颜色：#FFF；
字号：1em；
光标：指针；
文本转换：大写；
边界半径：4px；
动画：Fadein2S；
-moz动画：fadein 2s；/*Firefox*/
-webkit动画：fadein 2s；/*Safari和Chrome*/
}
#计划{
位置：绝对位置；
宽度：16%；
背景色：透明；
边框：2倍实心#FFF；
利润率最高：12%；
左边缘：54%；
高度：3em；
颜色：#FFF；
字号：1em；
光标：指针；
文本转换：大写；
边界半径：4px；
动画：Fadein2S；
-moz动画：fadein 2s；/*Firefox*/
-webkit动画：fadein 2s；/*Safari和Chrome*/
}
#接触{
位置：绝对位置；
宽度：16%；
背景色：透明；
边框：2倍实心#FFF；
利润率最高：12%；
左缘：71%；
高度：3em；
颜色：#FFF；
字号：1em；
光标：指针；
文本转换：大写；
边界半径：4px；
动画：Fadein2S；
-moz动画：fadein 2s；/*Firefox*/
-webkit动画：fadein 2s；/*Safari和Chrome*/
}
#主页：悬停{
颜色：#1dd2e2；
边框：3px实心#18bdef；
字体大小：粗体；
}
#关于：悬停{
颜色：#1dd2e2；
边框：3px实心#18bdef；
字体大小：粗体；
}
#项目：悬停{
颜色：#1dd2e2；
边框：3px实心#18bdef；
字体大小：粗体；
}
#联系人：悬停{
颜色：#1dd2e2；
边框：3px实心#18bdef；
字体大小：粗体；
}
@关键帧纹理{
0%，100%{transform:translate（0，0）}
10%{transform:translate（-5%，-10%）}
20%{transform:translate（-15%，5%）}
30%{转换：翻译（7%，-25%）}
40%{transform:translate（-5%，25%）}
50%{transform:translate（-15%，10%）}
60%{转换：转换（15%，0%）}
70%{转换：转换（0%，15%）}
80%{转换：翻译（3%，35%）}
90%{transform:translate（-10%，10%）}
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@-webkit关键帧fadein{/*Safari和Chrome*/
从{
不透明度：0；
}
到{
不透明度：1；
}
}

家
家
关于
项目
接触
从这里复制JS代码：
并将此新文件用作
grateate.js
的脚本源，而不是rawgit url脚本源

然后将新按钮添加到代码中，格式如下：

facebook:{
id:null，
faIcon：“facebook”，
颜色：“3b5998”，
url:“https://www.facebook.com/",
目标：null}，

facebook-新按钮的名称

id-//如果您需要此站点的id，请将其放在此处，否则保留null

faIcon-//将按钮所需的字体图标放在此处

颜色-//这是悬停颜色

url-您希望按钮将您带到的url

现在在js文件中，而不是：

facebook:{
id:“”
}

这样做

newButtonName:{
id:“”
},
otherNewButtonName：{
id:“”
}

现在，去享受劫持别人代码的乐趣；-）
 看起来所有的“优雅”插件所做的就是生成社交链接。你是想让它做更多的事情，还是只想让每个按钮显示4组独特的社交链接？我想能够创建一个按钮，一旦点击，它将在动画中做同样的淡入淡出，并显示一些内容。例如，一个“关于”按钮，一旦你点击它，它将打开一个包含关于我的段落的页面。你展示的示例只使用了一个社交媒体链接插件-它不会转换普通页面，只是一个社交媒体链接列表。是否可以添加文本而不是社交媒体链接？不使用该插件。我是说，有可能。。。这将是一个痛苦的屁股，并采取永远。从头开始编写该功能会更容易。好的！我会试试这个。它还有背景色、按钮大小、关闭按钮大小、文本颜色和淡入效果的选项。等等，这只是为js正在创建的页面创建按钮，对吗？我试图创建一个完整的新页面，在那里我可以写一段或一些东西。因为由于某种原因，当我尝试创建一个不同的页面时，它不起作用